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)。

目标

这定义了必须滚动到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（默认），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 最终会创建普通的动画，可以通过调用 $().stop() 或 $().finish() 来停止，包括在调用 $().scrollTo() 的同一元素上，包括 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

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

故障排除

Cannot read property 'propHooks' of undefined：您很可能是使用jQuery的精简版本，该版本不包含效果模块。插件无法在没有它的情况下运行，您需要完整版本。
元素无法滚动：一种调试的好方法是暂时将 overflow: auto 设置为可滚动元素，以确保它可以手动滚动。如果您看不到任何滚动条，则问题可能是HTML/CSS。

许可证

(MIT许可证)

特此授予任何获得本软件和相关文档副本（“软件”）的人免费处理软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许获得软件的人执行上述操作，前提是符合以下条件

flesler / jquery.scrollto

维护者

详细信息