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

Posted

技术标签:

【中文标题】如何使用 JQuery $.scrollTo() 函数滚动窗口【英文标题】:How to scroll the window using JQuery $.scrollTo() function 【发布时间】:2010-10-24 09:19:54 【问题描述】:

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

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

我在前后设置了一个警报,以检查它是否真的是停止它的线路,只有第一个警报响起,代码如下:

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

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

【问题讨论】:

Jquery 本身我工作正常,但你确定你有正确链接的 scrollTo 插件吗?将其中一个警报更改为 alert($.scrollTo); 【参考方案1】:
$('html, body').animate(scrollTop: $("#page").offset().top, 2000);

【讨论】:

我经常想知道为什么人们使用 'html, body' 作为 scrollTop 而不仅仅是 'html'。对此有什么想法吗? +1 为我工作 ;) 我也很想知道为什么 html, body 而不仅仅是 html? @ScottGreenfield,@Kato:不知道为什么,但这条评论说不包括 body 在 Chrome 4 上打破了这一点:***.com/questions/1890995/… scrollTop: 0 也可以正常工作。但是持续时间会下降。如果速度设置为 1000,则工作正常 这是一个很好的解决方案,直到您想要添加一个完整的方法 - 它会执行两次。 @compliistic 的解决方案更优雅,并且可以防止这种情况发生。【参考方案2】:

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

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

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

【讨论】:

请注意,如果您想滚动整个页面而不是单个元素,请使用 $('html, body') 就像Tim 在这里指出的那样。只是 $('body') 不会在所有浏览器中工作。【参考方案3】:

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

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

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

【讨论】:

出现一些语法错误 - 缺少您的结束 。否则这是一个好点。 应该改成$("#id").offset().top吗?【参考方案4】:

为了解决 htmlbody 的问题,我通过不直接为 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 的动画功能做什么的更多信息。

【讨论】:

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

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

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

【讨论】:

【参考方案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');

【讨论】:

以上是关于如何使用 JQuery $.scrollTo() 函数滚动窗口的主要内容,如果未能解决你的问题,请参考以下文章

scrollTo() 和 jquery scrollTop() 在 Chrome 中不起作用

jQuery scrollTo 插件在 iOS 上变成 Jerky

javascript Uikit 3 Accordion + ScrollTo #uikit #jquery

jQuery scrollTo 无法正常工作,html 设置为 100%

如何通过JQuery将DIV的滚动条滚动到指定的位置

window.scrollTo 在 iOS chrome 中不起作用