quay-js 是一款可用于在浏览器中创建平滑滚动效果的 JavaScript 库。它支持多种滚动方式，包括基于时间的缓动、基于距离的缓动、回弹效果等。这款库可用于帮助开发者轻松实现部分页面的平滑滚动效果，从而增加网站的用户交互性和吸引力。下面将详细介绍如何使用 quay-js 库。
安装 quay-js
首先，我们需要在本地项目中安装 quay-js。可以使用 npm 包管理工具来安装，也可以手动将库文件下载并在 HTML 中引入。
npm install quay-js
使用 quay-js
导入 quay-js
在需要使用 quay-js 的文件中，需要导入 quay-js 库文件。
import quay from "quay-js";
初始化 quay-js
在 HTML 文件中，定义需要平滑滚动的 HTML 元素，并为其添加一个唯一的 ID 属性。
<a href="#section-header" id="to-header">Go to Header</a> ... <section id="section-header">Header Section</section>
在 JavaScript 文件中，添加以下代码来初始化 quay-js 库。
-- -------------------- ---- -------
----- ---- - --- ---------
-----------
------- -------------
------- -----------------
--------- -----
------- --
---------- ------
---上面的代码定义了一个单击按钮，它将滚动到页面中 ID 为 to-header 的元素。在 init 函数调用中，我们指定了要滚动到的目标元素的 ID，以及动画效果的持续时间和延迟时间等参数。
quay-js 还允许我们通过 easing 参数来指定不同的缓动函数。缓动函数控制滚动效果的速度和加速度。可以在 Robert Penner 的网站上了解所有可用的缓动函数。
添加回弹效果
要添加回弹效果，可以在 init 函数中添加 rebound 参数并设置为 true。回弹效果将在元素滚动到其顶部或底部时自动触发。
quay.init({
button: "#to-header",
easing: "easeInOutCubic",
duration: 1000,
offset: 0,
container: "body",
rebound: true
});监视滚动事件
如果您需要在滚动时执行某些其他操作，可以使用 quay-js 中的 onScroll 回调函数。该函数接受一个参数 percent，该参数指示滚动的百分比，从而可以根据滚动位置执行相应的操作。
-- -------------------- ---- -------
-----------
------- -------------
------- -----------------
--------- -----
------- --
---------- -------
--------- ----------------- -
------------------- - -- -----------
-
---示例代码
下面是一个完整的示例代码，其中使用了 quay-js 实现了一个平滑滚动的按钮。
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------------
-------
------
-- ---------------------- ----------------- -- ----------
---
-------- -------------------------- -----------------
------- --------------
------ ------ ---- ----------
----- ---- - --- ---------
-----------
------- -------------
------- -----------------
--------- -----
------- --
---------- -------
-------- -----
--------- ----------------- -
------------------- - -- -----------
-
---
---------
-------
-------结论
quay-js 提供了一种轻松的方法来实现网站中的平滑滚动效果。该库非常易于使用，且仅有一个非常小的 JavaScript 文件。通过在这篇教程中学习 quay-js，您可以轻松地开始在网站中实现平滑滚动效果，并向用户提供更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681181e8991b448e4324