Smooth Scroll springt nach der Verarbeitung zum Anfang der Seite zurück

Question

Ich habe eine Funktion mit jQuery mit Smooth Scroll, die vom oberen Rand der Seite zu einem Anker aus einem URL-Hash scrollt.

Der Bildlauf funktioniert einwandfrei, aber wenn der Vorgang abgeschlossen ist, wird die Seite nach oben zurückgesetzt.

Hier ist, wie dies umgesetzt wird:

if (hash) { // if hash in the URL 

    $('html, body') 
     .animate({scrollTop:$(window.location.hash) 
     .offset().top - 200 }, 1000); 
    } 

Was dies verursachen könnte?

Answer 1

Das wahrscheinlichste Problem ist, dass Bilder und andere Inhalte noch nicht geladen wurden, so dass die Seite nicht ihre endgültigen Abmessungen erhalten hat. Auf diese Weise zeigt der erste Bildlauf nach dem Laden auf die falsche Position.

Ein guter Ansatz für solche Fälle ist das Scrollen nach dem Laden des Inhalts, also müssen Sie Ihren Code in die $(window).load Methode einbinden.

var hash = window.location.hash; 
$(window).load(function(){ 
    if (hash) { // if hash in the URL 

    $('html, body') 
     .animate({scrollTop:$(window.location.hash) 
     .offset().top - 200 }, 1000); 
    } 
});