Question

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

$('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>

但它仍无法正常工作？!!

Answer 1

你可以没有插件。

计划只是一个小小的改变。

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

Answer 2

您可以使用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);
});

Example on jsFiddle，页面顶部将完全位于div的中心

Answer 3

这是一个javascript函数，而不是jquery函数，与window.scroll相同。

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

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

y-coord是您希望在左上角显示的文档垂直轴上的像素。

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

Answer 4

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

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

然而，我同意Royi - 如果你能在没有插件的情况下做到这一点，那就更好了。

如何使用scrollTo函数？

4 个答案: