如何使用JQuery $ .scrollTo（）函数滚动窗口

98

每当用户接近文档顶部时，我都会尝试向下滚动100px。

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

我在之前和之后放置了一个警报，以检查它实际上是不是正在停止的那条线，只有第一个警报响起，这是代码：

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

我知道我的jquery页面链接正确，因为我在整个过程中都使用了许多其他jquery函数，而且它们都可以正常工作。我也尝试过从上方删除“ px”，但似乎没有什么不同。

3

jQuery本身可以正常工作，但是您确定已正确链接了scrollTo插件吗？将这些警报之一更改为alert（$。scrollTo）;

— 安德鲁

97

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

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

如果您希望平滑滚动，则可以使用基本的javascript setTimeout / setInterval函数，使其在设定的时间内以1px的增量滚动。

— 费明
source

8

请注意，如果要滚动整个页面而不是单个元素，请使用$（'html，body'），就像Tim在这里指出的那样。只是$（'body'）不能在所有浏览器中使用。

— 2013年

321

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

— 米海
source

19

我常常想知道为什么人们将'html，body'用作scrollTop而不是仅使用'html'。有什么想法吗？

— Scott Greenfield

+1为我工作；）我也很想知道为什么要使用html, bodyHTML而不是HTML？

— 加藤

9

@ScottGreenfield，@Kato：不知道为什么，但此评论说，这还不包括body这对Chrome 4的休息：stackoverflow.com/questions/1890995/...

— 虞姬“富田”富田

scrollTop: 0也工作正常。但是持续时间下降了。如果将速度设置为1000，则效果很好

— shashwat 2012年

在您要添加完整的方法之前，这是一个很好的解决方案-它将执行两次。@complistic的解决方案更加优雅，并且可以避免这种情况。

— plankguy

41

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

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

您不再需要setTimeout / setInterval即可平滑滚动。

— 托德
source

遇到一些语法错误-缺少结束符{。否则，这是一个好主意。

— 约书亚

1

应该$("#id").offset().top代替吗？

— codeulike 2011年

15

为了解决htmlvs 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的动画功能的更多信息。

— 全面的
source

1

太好了我只改window.pageYOffset到$(window).scrollTop()和window.scrollTo(0, val)到$(window).scrollTop(val)，所以我不必浏览器的兼容性担忧。

— leftclickben 2014年

1

我从没想过像这样将对象传递给jQuery的动画方法。有很多可能的用途。这个解决方案很棒，谢谢。

— Synexis 2014年

是的，技术是重要的贡献。以前通过直接使用“ window.scrollTo（）”解决了浏览器问题，但这不允许“完成”回调，也不能保证。感谢@complistic提供此解决方案。另外，我感谢@leftclickben; 我使用“ .scrollTop（）”实现了他的变体。另外，每个链接上的“ james.padolsey”文章都很简洁，非常值得一读。

— IAM_AL_X

我认为“ window.scrollTo（）”应该与所有现代浏览器兼容。

— IAM_AL_X

7

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

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

— Alconja
source

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');
}

— 提姆
source