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

Question

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

当用户接近文档顶部时，我执行了该函数，但 .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

为了解决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 函数可以做什么的信息。

Answer 5

看起来你的语法有点错误......我根据你的代码假设你试图在 800 毫秒内向下滚动 100 像素，如果是这样，那么这有效（使用 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');
}