0

我正在寻找一种从<div id="myButton">Home</div>另一个 div 点的中心滚动的方法。这样做的目的是因为我有 4 个页面，我希望它们水平相邻，并带有跟随页面的导航栏（完全位于中心）。为什么这不起作用？

这是一个JSfiddle

$('div#myButton').click(function () {
    $.scrollTo($('div#myDiv'), 500);
});

我有：

<body>

<div id="myButton">yo</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
.....
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="myDiv">hello</div>

<script>

$("div#myButton").click(function() {
 $('html, body').animate({
     scrollTop: $("div#myDiv").offset().top   }, 2000);
 });

</script>


</body>

但是还是不行？！！

4

4 回答 4

2

你可以在没有插件的情况下做到这一点。

只是计划的一个小改动。

$("div#myButton").click(function() {
     $('html, body').animate({
         scrollTop: $("div#myDiv").offset().top   }, 2000);
 });
于 2013-06-04T16:21:08.310 回答
0

这是一个javascript函数，不是jquery函数，和window.scroll一样。

window.scrollTo( x-coord, y-coord )

x-coord 是要显示在左上角的文档水平轴上的像素。

y 坐标是要显示在左上角的文档垂直轴上的像素。

来源：https ://developer.mozilla.org/en-US/docs/Web/API/window.scrollTo

于 2013-06-04T16:23:59.737 回答
0

这是“外部资源”中插件的小提琴：http: //jsfiddle.net/LKu6p/1/

您的代码是正确的，插件由于某种原因没有加载。检查<head>代码区域以检查它是否存在，如果存在，则文件的路径是否正确。

但是，我同意 Royi 的观点——如果你可以在没有插件的情况下做到这一点，那就更好了。

于 2013-06-04T16:24:47.833 回答
0

您可以使用scrollTop滚动。otherDiv.offset().top会将您放在 div 的顶部，添加otherDiv.height() / 2将向下滚动到 div 的中心

$('div#myButton').click(function () {
    var otherDiv = $('div#myDiv');
    $("html, body").scrollTop(otherDiv.offset().top + otherDiv.height() / 2);
});

jsFiddle 上的示例，页面顶部将恰好位于 div 的中心

于 2013-06-04T16:22:24.453 回答