jQuery: la méthode fonctionne correctement via .click, mais pas lorsqu'elle est exécutée directement à partir de document.ready

Question

J'ai un morceau de code jQuery qui - en théorie - défile vers une partie spécifique de la fenêtre en fonction de ce qui se passe après le hachage dans le Balise URL (myaddress.html # wheretoscroll).

Le code appelé est la suivante:

$(document).ready(function() { 
    anchor = unescape(self.document.location.hash.substring(1)) 
    if (anchor) { 
     $.scrollTo('#anchor-' + anchor, 500, {offset:-150}); 
    } 
} 

Le problème est que le document défile à un endroit hors de son alignement prévu. Il se rapproche presque du haut, mais il semble aller trop loin avec une imprécision croissante à mesure que le document tombe en panne.

Mais ...

Si je lance le même code dans un .cliquez ou .hover fonction, par exemple:

$(document).ready(function() { 
    $('body').hover(function() { 
     anchor = unescape(self.document.location.hash.substring(1)) 
     if (anchor) { 
      $.scrollTo('#anchor-' + anchor, 500, {offset:-150}); 
     } 
    }); 
}); 

il défile à l'endroit exact où elle devrait être. Je suppose que c'est une sorte de problème avec le DOM n'étant pas lu correctement au point de .ready? Toutes les suggestions pour corriger cela (ou une manière plus élégante de déclencher l'action dès que la page se charge mais pas directement via .ready) seraient très appréciées.

S'il importe, le plug-in .scrollTo J'utilise peut être trouvé ici: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

... Vive

Answer 1

Essayez ceci:

$(window).load(function() { 
    anchor = unescape(self.document.location.hash.substring(1)) 
    if (anchor) { 
     $.scrollTo('#anchor-' + anchor, 500, {offset:-150}); 
    } 
} 

parties de votre page sont continuer à charger après que le DOM est prêt. $(window).load() se déclenche lorsque tout votre contenu est chargé - y compris les images.