为什么平滑滚动在滚动之前会闪烁？答案

【问题标题】：Why does smooth scroll flash before scrolling?为什么平滑滚动在滚动之前会闪烁？
【发布时间】：2012-10-10 03:30:51
【问题描述】：

我正在构建一个单页网站，该网站通过锚标记分为多个部分。当您单击导航链接时，它会平滑滚动到该部分（只有资金领域和关于我们的部分是完整的），但是，似乎大约 50% 的时间当您单击链接时，它平滑滚动到的背景图像会在之前闪烁jQuery 向上或向下滚动。

在我看来，HTML 似乎试图立即转到锚点，因此闪烁，但随后 jQuery 说，等等，我需要慢慢滚动。

我不知道如何解决这个问题。

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

我非常感谢任何和所有建议。

【问题讨论】：

标签： jquery scroll smooth-scrolling

【解决方案1】：

尝试在点击函数后添加event.preventDefault();。

这会阻止链接做它应该做的事情（立即跳转到锚点）并防止竞争条件。

【讨论】：

【解决方案2】：

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

甚至更干净：

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

原因如下：

event.preventDefault() vs. return false

【讨论】：