jQuery.scrollTo 滚动到页面指定位置

Question

jQuery.scrollTo 用于定位页面中元素的位置，并使滚动条滚动到当前元素。 插件可以按x轴、y轴滚动。可以嵌套元素，当前元素在父元素中滚动。

安装

NPM

• Install: npm install --save jquery-scrollto
• Module: require('jquery-scrollto')

Browserify

• Install: npm install --save jquery-scrollto
• Module: require('jquery-scrollto')
• CDN URL: //wzrd.in/bundle/jquery-scrollto@1.4.6

Ender

• Install: ender add jquery-scrollto
• Module: require('jquery-scrollto')

Direct

• CDN URL: //rawgit.com/balupton/jquery-scrollto/blob/gh-pages/lib/jquery-scrollto.js
• ZIP: https://github.com/balupton/jquery-scrollto/zipball/gh-pages

使用方法

jQuery.scrollTo的签名设计为类似于 $().animate()。

$(element).scrollTo(target[,duration][,settings]);

要滚动整个窗口，必须使用可滚动元素 $(window)。

目标

这定义了element必须滚动到的位置。该插件支持所有这些格式：

• 固定位置的数字： 250
• 固定位置带有px的字符串： "250px"
• 带有百分比（等于容器大小）的字符串： "50%"
• 带有相对步长的字符串： "+=50px"
• 一个对象，left并且top包含以下任何一个：{left:250, top:"50px"}
• "max"滚动到末尾的字符串。
• 相对于要滚动的元素的字符串选择器： ".section:eq(2)"
• DOM元素，可能是要滚动的元素的子元素： document.getElementById("top")
• 带有DOM元素的jQuery对象： $("#top")

设定

该duration参数是具有相同名称的设置的快捷方式。这些是受支持的设置：

• axis：动画方向，默认 xy，可选 xyyx
• interrupt：如果true用户滚动，则将取消动画。默认为false
• limit：如果true插件不会滚动超出容器的大小。默认为true
• margin：如果为true，则减去target元素的空白和边框。默认为false
• offset：添加到最终位置，可以是数字或带有left和的对象top
• over：添加target尺寸的％：{left:0.5, top:0.5}
• queue：如果true将滚动一个axis，然后滚动另一个。默认为false
• onAfter(target，settings)：动画结束时触发的回调（jQuery的complete()）
• onAfterFirst(target, settings)：排队时第一个轴滚动后触发的回调

您还可以添加 $().animate() 支持的任何设置：

• 持续时间：动画的持续时间，默认情况下是0即时的
• 缓动：缓动方程的名称，必须注册缓动函数：swing
• fail()：动画停止时触发的回调（通过interrupt）
• step()：为每个帧上的每个动画属性触发一个回调
• progress()：每帧触发一个回调
• 还有更多信息，请查看jQuery的 文档

调用简写

您可以 $.scrollTo(...) 用作的简写 $(window).scrollTo(...)。

更改默认设置

与大多数插件一样，默认设置是公开的，因此可以更改它们。

$.extend($.scrollTo.defaults, {
  axis: 'y',
  duration: 800
});

停止动画

jQuery.scrollTo 最终建立其可以通过调用停止普通动画 $().stop() 或 $().finish()你叫在相同的元素 $().scrollTo()，其中包括 window。记住，fail() 当动画停止时，您可以传递一个回调来调用。

onAfter 和 requestAnimationFrame

jQuery.scrollTo具有onAfter动画完成后运行的回调。scroll事件触发前将调用它。为了解决这个问题，您可以使用 requestAnimationFrame在下一个刻度上进行操作。它在许多浏览器中都可用，但是您可能想对其不支持的少数几个进行 polyfill 。

$.scrollTo(100, {
  onAfter: function() {
    requestAnimationFrame(function() {
        $(".result").addClass("selected");
    });
  }
});

相关链接

• https://www.npmjs.com/package/jquery-scrollto
• https://github.com/flesler/jquery.scrollTo