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

Question

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

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

我在之前和之后发出警告，检查它是否确实是停止它的线路，只有第一个警报响起，这是代码：

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

我知道我正确地链接了jquery页面，因为我正在使用许多其他jquery函数，它们都工作正常。我也试过从上面删除“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作为动画变量。

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

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

Answer 4

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

Answer 5

看起来你的语法有点错误......我假设根据你的代码，你试图在800毫秒内向下滚动100px，如果是这样，那么这是有效的（使用scrollTo 1.4.1）： / p>

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