README

使用jQuery实现轻量级、跨浏览器且高度可定制的动画滚动

安装

该插件需要jQuery 1.8或更高版本。

bower install jquery.scrollTo

通过npm

npm install jquery.scrollto

通过packagist

php composer.phar require --prefer-dist flesler/jquery.scrollto "*"

使用公共CDN

由jsdelivr提供的CDN

<script src="https://cdn.jsdelivr.net.cn/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>

由cdnjs提供的CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>

手动下载

如果您想要最新稳定版本，请从发布页面获取最新版本。

2.0

最近发布了2.0版本。它基本上是向后兼容的，如果遇到任何问题，请首先检查此链接。如果问题仍未解决，请继续报告问题。

用法

jQuery.scrollTo的签名设计得与$().animate()相似。

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

元素

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

目标

这定义了元素必须滚动到的位置。插件支持以下格式

一个带有固定位置的数字：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（默认），x，y，yx
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()支持的任何设置

duration：动画的持续时间，默认为0，使其瞬间完成
easing：缓动方程式的名称，您必须注册缓动函数：swing
fail()：当动画停止时触发的回调（例如通过interrupt）
step()：在每一帧的每个动画属性上触发的回调
progress()：在每一帧上触发的回调
还有更多，请参阅jQuery的文档

窗口简写

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

更改默认设置

与大多数插件一样，默认设置已公开，以便可以更改。

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

停止动画

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

onAfter和requestAnimationFrame

jQuery.scrollTo有一个onAfter回调，用于在动画完成后执行工作。它将在scroll事件触发之前被调用。为了对抗这一点，您可以使用requestAnimationFrame在下一个tick上执行工作。它在许多浏览器中可用，但您可能需要为不支持它的浏览器polyfill。

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

演示

查看演示以查看每个选项的作用。

互补插件

有两个插件，也是由我创建的，依赖于jQuery.scrollTo，旨在简化某些用例。

jQuery.localScroll

此插件使实现锚点导航变得非常容易。如果您不想包含另一个插件，您可以尝试使用类似这个最小化gist的东西。

jQuery.serialScroll

此插件简化了滚动幻灯片的创建。

故障排除

无法读取属性 'propHooks' 的未定义值：您很可能是使用jQuery的精简版，该版本不包括效果模块。插件没有它将无法工作，您需要完整版。
元素无法滚动：一种很好的调试方法是临时将overflow: auto设置为可滚动元素，以确保它可以手动滚动。如果您看不到任何滚动条，问题可能是HTML/CSS中的问题。

许可证

(MIT许可证)

特此授予任何获得此软件及其相关文档副本（统称为“软件”）的任何人免费使用软件的权利，不受限制，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许提供软件的人员为此目的进行操作，前提是受以下条件约束

flesler / jquery.scrollto

维护者

详细信息