Question

我遇到了jquery animate（）的问题，在点击相应的链接时自动将页面滚动到所需的div。它在FF和Safari中完美运行但在chrome中，点击视图跳转到div并快速返回其原始位置（可能是100ms）然后根据需要滚动到相关的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);
});

Jquery滚动动画在chrome上跳跃

1 个答案: