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

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

当用户靠近文档的顶部时，我有函数执行，但.scrollTo函数不起作用。

我在之前和之后发出警报，检查是否确实是该线路的阻断，只有第一个警报熄灭，代码如下：

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

我知道我有正确的jquery页面链接，因为我使用了许多其他的jQueryfunction，他们都工作正常。 我也尝试从上面删除'px'，这似乎没有什么区别。

Answer 1

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

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

如果你正在寻找滚动顺畅，你可以使用基本的JavaScript setTimeout / setInterval函数，使其在一段时间内以1px的增量滚动。

Answer 2

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

Answer 3

jQuery现在支持scrollTop作为animationvariables。

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

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

Answer 4

为了解决html vs body问题，我通过不直接animationcss来解决这个问题，而是调用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的animationfunction的信息。;

Answer 5

看起来你的语法稍微有点错误…我假设根据你的代码，你想在800毫秒内向下滚动100px，如果是的话，这个工作（使用scrollTo 1.4.1）：

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

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