Warum blitzt die sanfte Bildlauffunktion vor dem Bildlauf?

Question

Ich baue eine einzelne Seite Website, die in Abschnitte über Anchor-Tags aufgeteilt ist. Wenn du auf die Navigationslinks klickst, scrollt es sanft zum Abschnitt (nur die Finanzierungsbereiche und über uns sind komplett), aber es scheint ungefähr 50% der Zeit zu sein, wenn du auf den Link klickst, das Hintergrundbild blättert zu Blitzen Die jQuery scrollt nach oben oder unten.

Für mich scheint es so, als würde der HTML-Code sofort zum Anker gehen, daher das Blinken, aber dann sagt jQuery, halten Sie, ich muss langsam scrollen.

Ich bin mir nicht sicher, wie man das löst.

jQuery:

// SlowScroll Funding Areas 
$(document).ready(function(){ 

// 'slowScrollTop' is the amount of pixels #teamslowScroll 
// is from the top of the document 

    var slowScrollFunding = $('#funding-areas').offset().top; 

// When #anchor-aboutus is clicked 

    $('#anchor-funding-areas').click(function(){ 
     // Scroll down to 'slowScrollTop' 
     $('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000); 
    }); 
}); 

// SlowScroll About Us 
$(document).ready(function(){ 
// 'slowScrollTop' is the amount of pixels #slowScrollTop 
// is from the top of the document 

    var slowScrollTop = $('#about-us').offset().top + 446; 

// When #anchor-aboutus is clicked 

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
}); 
}); 

ich sehr schätze irgendwelche und alle Vorschläge.

Answer 1

Versuchen Sie event.preventDefault(); nach Ihrer Klickfunktion hinzuzufügen.

Dies stoppt die Verbindung von dem, was es tun soll (springt sofort zum Anker) und verhindert einen Wettlauf.

Answer 2

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

Oder noch sauberer:

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
    return false; 
}); 

Hier ist der Grund:

• event.preventDefault() vs. return false