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() vs. return false

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

2 个答案: