Warum blinkt der glatte Bildlauf vor dem Scrollen?

Question

Ich baue eine einseitige Website auf, die über Anker-Tags in Abschnitte unterteilt ist. Wenn Sie auf die nav-Links klicken, scrollt es glatt auf den Abschnitt (nur Finanzierung Bereiche und über uns sind vollständig), jedoch scheint es wie etwa 50 % der Zeit, wenn Sie auf den Link klicken, das Hintergrundbild es glatt scrollt zu blinkt, bevor die jQuery nach oben oder unten scrollt.

Für mich sieht es so aus, als würde der HTML-Code versuchen, sofort zum Anker zu gehen, daher das Blinken, aber dann sagt jQuery, warte mal, ich muss langsam scrollen.

Ich bin mir nicht sicher, wie ich das Problem lösen kann.

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 bin für alle Vorschläge sehr dankbar.

Answer 1

Versuchen Sie event.preventDefault(); nach Ihrer Klickfunktion.

Dadurch wird verhindert, dass die Verknüpfung das tut, was sie tun soll (sofort zum Anker springen), und eine Wettlaufsituation wird vermieden.

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 dafür:

• event.preventDefault() vs. return false