11

我正在构建一个单页网站，该网站通过锚标签分为多个部分。当您单击导航链接时，它会平滑滚动到该部分（只有资金领域和关于我们的部分是完整的），但是，似乎大约 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);
});
});

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

4

2 回答 2

10

尝试event.preventDefault();在单击功能后添加。

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

于 2014-04-11T06:29:47.850 回答
5 
$('#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;
});

原因如下：

于 2016-06-02T23:28:41.890 回答