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

Question

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

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

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

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

我知道我已经正确链接了jquery页面,因为我正在使用许多其他jquery函数,它们都工作正常.我也试过从上面删除'px',它似乎没有什么区别.

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

为了解决htmlvs body问题,我通过不直接动画css而是调用window.scrollTo();每一步来解决这个问题:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

这很好用,没有任何刷新问题,因为它使用跨浏览器JavaScript.

有关使用jQuery动画功能可以做些什么的更多信息,请查看http://james.padolsey.com/javascript/fun-with-jquerys-animate/.

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