滚动前为什么平滑滚动会闪烁？

Question

我正在建立一个单页网站,通过锚标签分成几个部分.当您单击导航链接时,它会平滑滚动到该部分(仅限资金区域和我们已完成),但是,当您单击链接时,它似乎有大约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);
});
});

我非常感谢任何建议.

Answer 1

event.preventDefault();点击功能后尝试添加.

这会阻止链接执行它应该执行的操作(立即跳转到锚点)并防止竞争条件.

Answer 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() 与返回 false