如何使用JQuery的$.scrollTo()函数滚动窗口

Question

我正在尝试每当用户接近文档顶部时向下滚动100像素。

当用户接近文档顶部时，我的函数得到了执行，但.scrollTo函数不起作用。

我在前后都加了一个警告来检查是否真的是这一行阻止了它，只有第一个警告会触发，这是代码：

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

我知道我已经正确地链接了jQuery页面，因为我使用了许多其他的jQuery函数，它们都工作正常。我也尝试过从上面删除'px'，但似乎没有任何区别。

- Matt Doak

---

jQuery本身可能工作正常，但您确定已正确链接scrollTo插件吗？将其中一个警报更改为alert($.scrollTo)。 - Andrew

Answer 1

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

- Mihai

---

我经常想知道为什么人们在使用scrollTop时会用'html, body'而不只是用'html'。你对此有何想法？ - Scott Greenfield

@ScottGreenfield，@Kato：不确定为什么，但此评论指出在Chrome 4上不包括“body”会导致问题：https://dev59.com/13I-5IYBdhLWcg3wYXH8 - Yuji 'Tomita' Tomita

这是一个不错的解决方案，直到你想添加完整的方法 - 它会执行两次。@complistic的解决方案更加优雅，并且可以防止这种情况发生。 - plankguy

在IE中，使用DTD 4，您需要更改document.documentElement（html）的scrollTop。在其他浏览器中，您需要更改document.body（body）的scrollTop。为了使其适用于所有浏览器，您只需通过$（'html，body'）更改两者即可。 - Andi

我在某些浏览器上遇到了问题，主要是IE，问题在于我的选择器只针对body，添加html，body修复了它。 - Daniel Dewhurst

Answer 2

如果它没有起作用，为什么不尝试使用jQuery的scrollTop方法呢？

$("#id").scrollTop($("#id").scrollTop() + 100);

如果您想要平滑地滚动页面，您可以使用基本的JavaScript setTimeout/setInterval函数，在一定时间内使页面以1像素为增量来滚动。

- Fermin

---

请注意，如果您想滚动整个页面而不是单个元素，请像Tim指出的那样使用$('html, body')。在所有浏览器中都不仅使用$('body')。 - i--

Answer 3

现在jQuery支持将scrollTop作为动画变量。

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

现在您不再需要使用setTimeout/setInterval来实现平滑滚动。

- Todd

---

有一些语法错误- 缺少了你的闭合 {。否则这是一个好的观点。 - Joshua

应该改为 $("#id").offset().top 吗？ - codeulike

Answer 4

为了避免出现“html”与“body”的问题，我解决了这个问题，不直接对CSS进行动画处理，而是在每一步上调用“window.scrollTo();”。

为了解决“html”与“body”的问题，我避免直接对CSS进行动画处理，而是通过在每一步上调用“window.scrollTo();”来解决该问题：

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

由于它使用跨浏览器的JavaScript，因此这可以完美地运行而没有任何刷新陷阱。

查看http://james.padolsey.com/javascript/fun-with-jquerys-animate/，了解您可以使用jQuery的animate函数做什么。

- complistic

---

这简直太棒了。我只是将 window.pageYOffset 改为 $(window).scrollTop()，将 window.scrollTo(0, val) 改为 $(window).scrollTop(val)，这样我就不必担心浏览器兼容性的问题了。 - leftclickben

我从未想过可以像这样将对象传递给jQuery的animate方法。有很多可能的用途。这个解决方案非常棒，谢谢。 - Synexis

是的，技巧是一个重要的贡献。以前通过直接使用 "window.scrollTo()" 来解决浏览器问题，但这不允许进行 "complete" 回调或者 Promise。感谢 @complistic 提供的解决方案。同时也感谢 @leftclickben，我实现了他使用 ".scrollTop()" 的变体。此外，根据链接提供的 "james.padolsey" 文章非常简洁且值得一读。 - IAM_AL_X

我认为 "window.scrollTo()" 应该与所有现代浏览器兼容。 - IAM_AL_X

Answer 5

看起来您的语法有些错误...根据您的代码，我假设您正在尝试在800ms内向下滚动100px，如果是这样，则可以使用以下代码（使用scrollTo 1.4.1）：

$.scrollTo('+=100px', 800, { axis:'y' });

- Alconja

Answer 6

实际上，类似于：

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

这将很好地工作并支持填充。您也可以轻松支持边距 - 有关完成信息，请参见下文

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}

- Tim