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

IT技术 javascript jquery scroll scrollto
2021-01-16 21:40:25

每次用户靠近文档顶部时,我都试图向下滚动 100 像素。

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

我在前后发出警报以检查它是否真的是停止它的线路并且只有第一个警报响起,这是代码:

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

我知道我已经正确链接了 jquery 页面,因为我在整个过程中使用了许多其他 jquery 函数,并且它们都可以正常工作。我也试过从上面删除“px”,它似乎没有什么区别。

6个回答
$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);
我经常想知道为什么人们对 scrollTop 使用 'html, body' 而不仅仅是 'html'。对此有何想法?
2021-03-17 21:40:25
scrollTop: 0也工作正常。但持续时间下降。如果速度设置为 1000,则工作正常
2021-03-17 21:40:25
这是一个很好的解决方案,直到您想要添加一个完整的方法 - 它会执行两次。@complistic 的解决方案更优雅,并且会阻止这种情况。
2021-03-25 21:40:25
+1 为我工作 ;) 我也很想知道为什么html, body而不仅仅是 html?
2021-03-28 21:40:25
@ScottGreenfield,@Kato:不知道为什么,但这条评论说不包括body在 Chrome 4 上的中断:stackoverflow.com/questions/1890995/...
2021-04-13 21:40:25

如果它不起作用,为什么不尝试使用 jQuery 的 scrollTop 方法?

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

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

请注意,如果您想滚动整个页面而不是单个元素,请使用 $('html, body') 就像Tim在这里指出的那样。只是 $('body') 不适用于所有浏览器。
2021-04-03 21:40:25

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

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

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

有一些语法错误 - 缺少您的结束 {。否则这是一个好点。
2021-03-17 21:40:25
应该$("#id").offset().top改为吗?
2021-03-17 21:40:25

为了解决htmlvsbody问题,我通过不直接为 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 函数可以做什么的更多信息。

这太棒了。我只更改window.pageYOffset$(window).scrollTop()window.scrollTo(0, val)$(window).scrollTop(val)所以我不必担心浏览器兼容性。
2021-03-15 21:40:25
是的,技术是一项重大贡献。以前通过直接使用“window.scrollTo()”来解决浏览器问题,但这不允许“完整”回调,也不允许Promise。感谢@commplistic 提供此解决方案。另外,感谢@leftclickben;我使用“.scrollTop()”实现了他的变体。此外,每个链接的“james.padolsey”文章非常简洁,非常值得一读。
2021-03-23 21:40:25
我从没想过像这样将对象传递给 jQuery 的 animate 方法。这么多可能的用途。这个解决方案很棒,谢谢。
2021-03-29 21:40:25
我认为“window.scrollTo()”应该与所有现代浏览器兼容。
2021-04-05 21:40:25

看起来你的语法有点错误......我根据你的代码假设你试图在 800ms 内向下滚动 100px,如果是这样,那么这有效(使用 scrollTo 1.4.1):

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