Wie kann ich feststellen, ob eine Seite in Javascript auf den Anker (#) gesprungen ist?

Question

Ich habe einige Javascript, die auf vielen verschiedenen Seiten erscheinen können. Manchmal wurde auf diese Seiten über eine URL zugegriffen, die eine Ankerreferenz enthält (z. B. # comment-100). In diesen Fällen möchte ich, dass das JavaScript die Ausführung verzögert, bis das Fenster gesprungen ist. Im Moment benutze ich nur eine Verzögerung, aber das ist ziemlich hackig und funktioniert offensichtlich nicht in allen Fällen. Ich kann anscheinend keine Art von DOM-Ereignis finden, das dem Fenster "Sprung" entspricht.

Abgesehen von der einfachen Verzögerung ist die einzige Lösung, die ich gefunden habe, dass die JS nach dem Anker in der URL sucht und, wenn sie einen findet, nach Änderungen in scrollTop Ausschau hält. Aber das scheint fehlerhaft, und ich bin nicht 100% sicher, dass mein Skript immer ausgelöst wird, bevor das Scrollen stattfindet, so dass es nur ausgeführt würde, wenn der Benutzer die Seite manuell scrollt. Wie auch immer, ich mag die Lösung nicht wirklich und würde etwas Event-getriebenes bevorzugen. Irgendwelche Vorschläge?

bearbeiten zu klären:

ich nicht bin versucht, eine Hash-Änderung zu erkennen. Nehmen Sie das folgende Beispiel:

1. Seite index.php einen Link enthält # Kommentar-1
2. Benutzer post.php auf den Link klickt # comment-1
3. post.php # comment- post.php 1 lädt
4. $ (document) .ready Feuer
5. Nicht lange später den Browser nach unten scrollt, um # comment-1

ich versuche, zuverlässig zu erfassen, wenn Schritt 5 passiert.

Answer 1

Scheint so, als könnten Sie window.onscroll verwenden. Ich habe diesen Code gerade jetzt getestet:

<a name="end" /> 
<script type="text/javascript"> 
    window.onscroll = function (e) { 
     alert("scrolled"); 
} 
</script> 

scheint zu funktionieren.

Edit: Hm, es funktioniert nicht in IE8. Es funktioniert jedoch sowohl in Firefox als auch in Chrome.

Bearbeiten: jQuery hat einen .scroll() Handler, aber es vor dem Scrollen auf IE ausgelöst und scheint nicht für Chrome oder Firefox zu arbeiten.

Answer 2

Sie können window.onhashchange in modernen Browsern überprüfen. Wenn Sie Kreuzkompatibel möchten, überprüfen Sie http://benalman.com/projects/jquery-hashchange-plugin/

Diese Seite hat mehr Informationen über window.onhashchange sowie.

EDIT: Sie grundsätzlich alle Anker-Namen mit einer ähnlichen Verbindungs ​​Konvention ersetzen, und dann .scrollTo verwenden das Scrollen zu handhaben:

$(document).ready(function() { 
    // replace # with #_ in all links containing # 
    $('a[href*=#]').each(function() { 
     $(this).attr('href', $(this).attr('href').replace('#', '#_')); 
    }); 

    // scrollTo if #_ found 
    hashname = window.location.hash.replace('#_', ''); 
    // find element to scroll to (<a name=""> or anything with particular id) 
    elem = $('a[name="' + hashname + '"],#' + hashname); 

    if(elem) { 
     $(document).scrollTo(elem, 800,{onAfter:function(){ 
     //put after scroll code here }}); 
    } 
}); 

jQuery: Scroll to anchor when calling URL, replace browsers behaviour Info für mehr sehen.

Answer 3

zu erkennen, wenn das Element auf dem Bildschirm angezeigt wird, verwenden Sie die appear Plugin:

$('#comment-1').appear(function() { 
    $(this).text('scrolled'); 
});