Dlaczego płynne przewijanie jest przewijane przed przewinięciem?

Question

Buduję stronę z jedną stroną podzieloną na sekcje za pomocą znaczników zakotwiczonych. Po kliknięciu na linki nav płynnie przewija się do sekcji (tylko obszary finansowania i o nas są kompletne), jednak wydaje się, że około 50% czasu, gdy klikniesz łącze, obraz tła płynnie przewija się do błyśnięcia przed jQuery przewija w górę lub w dół.

Dla mnie wygląda na to, że HTML próbuje natychmiast przejść do zakotwiczenia, stąd flashowanie, ale potem jQuery mówi, przytrzymaj, muszę przewijać powoli.

Nie jestem pewien, jak rozwiązać ten problem.

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); 
}); 
}); 

Bardzo doceniam Wszelkie sugestie.

Answer 1

Spróbuj dodać event.preventDefault(); po kliknięciu.

Uniemożliwia to połączenie z robieniem tego, co ma zrobić (natychmiastowe przejście do kotwicy) i zapobiega sytuacji wyścigu.

Answer 2

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

Albo nawet czystsze:

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

Oto dlaczego:

• event.preventDefault() vs. return false