1

我的 html 页面中有这段代码。

  $('#buttonMenu').on('click',function(){
    var errDiv = $("#divWhichToMoveTo");
    errDiv.show();
    var pos = errDiv.position().top;
    $("html, body").animate({ scrollTop: pos });
  });


  <li><a id="buttonMenu" title="Yea" alt="Yea" href="#">Yea</a></li>

  <div id="divWhichToMoveTo"><strong>An error occured, oh noes!!</strong></div>

当用户点击“buttonMenu”时，它应该使页面（轻轻地）向下滚动到“divWhichToMoveTo”所在的位置。它可以工作，但我在一个长页面中有几个按钮和几个 div。有时在 html 页面的不同点从一个到另一个传递，我可以在一毫秒内看到动画开始之前 html 页面的开头，并将我从我所在的点带到我想要登陆的点。我错过了什么？

4

3 回答 3

3

改用这个：

$('#buttonMenu').on('click', function (e) {
    e.preventDefault();
    var errDiv = $("#divWhichToMoveTo");
    errDiv.show(function () {
        $("html, body").animate({
            scrollTop: errDiv.offset().top
        }, 1000);
    });
});

e.preventDefault()阻止默认操作，即转到#. 这就是页面跳转的原因。

.position().top返回错误的值。这使用.offset()它获取相对于文档的偏移量并且完美地工作。

演示： http: //jsfiddle.net/cEwQv/1/（刚刚应用了边距，所以有地方可以滚动到）

于 2013-06-26T14:12:30.963 回答
0

在锚链接中添加 javascript:void(0) 代替 # 也会有所帮助

例如

写

<a href="javascript:void(0)">Yea</a>

代替

<a href="#">Yea</a>
于 2013-06-26T16:17:33.137 回答
-1

您可以像这样以毫秒为单位添加时间-->

   $("html, body").animate({ scrollTop: pos }, 2000)

如果我没记错的话，1000毫秒被认为是1秒！

于 2013-06-26T14:11:37.330 回答