为啥平滑滚动在滚动之前会闪烁？

Posted 2023-05-09

【中文标题】为啥平滑滚动在滚动之前会闪烁？

【英文标题】：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);
);
);

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

【参考方案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