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

Posted 2023-05-08

tags:

中文标题：使用jQuery实现轻量级、跨浏览器和高度可定制的动画滚动 原文标题：Lightweight, cross-browser and highly customizable animated scrolling with jQuery 项目评级：Star:3600 Fork:1000 下载地址：https://github.com/flesler/jquery.scrollTo 详情介绍

jQuery.scrollTo（jQuery.scrollTo）

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

安装

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

通过bower：

通过npm：

通过包装学家：

使用公共CDN

jsdelivr提供CDN

cdnjs提供CDN

手动下载

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

2.0版本最近发布。它大部分是向后兼容的，如果您有任何问题，请先查看此链接。

如果您的问题没有得到解决，那么继续报告问题。

用法

scrollTo的签名被设计成类似于$（）.animate（）。

元素

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

目标

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

设置

duration参数是指向同名设置的快捷方式。

以下是支持的设置：

您也可以添加$（）.animate（）支持的任何设置：

窗口速记

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

更改默认设置

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

停止动画

jQuery.scrollTo最终会创建普通动画，可以通过对您调用$().scrollTo()的同一元素（包括window）调用$（）.stop（）或$（）.finish（）来停止这些动画。

请记住，当动画停止时，您可以传递fail()回调以进行调用。

onAfter和requestAnimationFrame

jQuery.scrollTo对动画完成后运行的工作有一个onAfter的回调。它将在scroll事件发生之前被调用。为了解决这个问题，您可以使用requestAnimationFrame在下一次勾选时进行操作。它在许多浏览器中都可用，但对于它不支持的少数浏览器，您可能需要polyfill。

演示

查看演示，查看每个选项的实际操作。

补充插件

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

jQuery.local滚动

这个插件使得实现锚点导航变得非常容易。

如果你不想包含另一个插件，你可以尝试使用类似于这种极简主义的要点。

jQuery.serialScroll

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

故障排除

许可证

（麻省理工学院许可证）