Jquery滚动动画在chrome上跳跃

Question

当点击相应的链接时，我在使用 jquery animate() 时自动将页面滚动到所需的 div 时遇到问题。它在 FF 和 Safari 中完美运行，但在 chrome 中，单击时视图会快速跳转到 div 并返回到其原始位置（可能是 100 毫秒），然后根据需要继续滚动到相关 div。当其他浏览器不受影响时，我已经看到了 jquery 的帖子，但不是专门在 chrome 上。

这里是 JS

function initialize_autoscroll(){
  //Auto Scrolling Based on clicked links
  $('#home_button').click(function(){
     $('html, body').animate({scrollTop: 0}, 700);
     });

  $('#features_button').click(function(){
     $('html, body').animate({  scrollTop: $("#features").offset().top -50}, 700);
  });

  $('#examples_button').click(function(){
    $('html, body').animate({   scrollTop: $("#examples").offset().top -50}, 700);
  });

  $('#pricing_button').click(function(){
     $('html, body').animate({  scrollTop: $("#pricing").offset().top -50}, 700);
  });

  }

$(document).ready(function(){
  initialize_autoscroll();
});

这是一个触发滚动功能的标签示例

<a id="features_button" href="#features"><i class="icon-plus"></i> Features</a>

这是一个链接到的示例 div：

<div id="features" class="container-narrow" style="padding-bottom:50px">
</div

Answer 1

您需要使用Event.preventDefault() 停止所有#anchors 绑定中的默认操作。例如，

$('#home_button').click(function(evt){
  evt.preventDefault();
  $('html, body').animate({scrollTop: 0}, 700);
});