简介
scrollup是一个轻量级的npm包，它可以帮助我们在页面中添加一个“回到顶部”的按钮，并实现滚动时的平滑动画效果。该包易于使用且适用于各种网站和应用程序。
本文将详细介绍如何安装和使用scrollup包。
安装
要安装scrollup，请先确保您已经安装了npm。然后打开终端并输入以下命令：
npm install scrollup
使用方法
安装完毕后，我们需要引入scrollup并配置它。以下是使用scrollup的基本步骤：
1. 引入scrollup
在您的HTML文件的<head>标签中添加以下代码：
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/scrollup/dist/scrollup.min.css"> </head>
这会使样式文件可用于您的页面。
在您的JavaScript文件中引入scrollup并创建一个新实例：
import ScrollUp from 'scrollup';
const scrollUp = new ScrollUp({
// options here
});2. 配置选项
创建scrollup实例时，您可以传递一些选项来定制其行为。以下是最常见的选项：
const scrollUp = new ScrollUp({
element: document.querySelector('#scroll-up'),
distance: 300,
duration: 500,
easing: 'easeInOutQuad'
});element：定义回到顶部按钮的DOM元素。distance：定义当页面滚动多少像素时显示回到顶部按钮。duration：定义平滑滚动的持续时间（以毫秒为单位）。easing：定义平滑滚动的缓动函数。
3. 显示回到顶部按钮
最后，您需要在HTML中添加一个回到顶部的按钮，并将其与您的实例关联起来。例如：
-- -------------------- ---- -------
------
---- ---- ---- ------- ---- ---
------- -------------- --------------------------
--------
------ -------- ---- -----------
----- -------- - --- ----------
-------- ------------------------------------
---
---------
-------现在您已经成功使用了scrollup！当页面向下滚动时，回到顶部按钮会自动出现，并且当用户单击它时，页面会平滑滚动到顶部。
示例代码
以下是一个完整的示例代码，展示如何使用scrollup包：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -- ---------------
----- ---------------- -------------------------------------------------------------------
-------
-- ---- ------ --- --- ---- --
---- -
----------------- --------
------------ ------ -----------
-
-- -
----------- --
-
- -
------------ ----
-
--------
-------
------
---------- -- ------------
-------- ----- ----- --- ----- ----------- ---------- ----- ------ ------ ------ ------- -- ------- --- ----------- --- --- --- -------- ------ --- --------- --------- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ ------------
------- --------- ---- - -------- ------- ----- --- ---- ----- --- ----- ------- -------- -- -- ------ ----- --------- ----------- -------- -- --- --------- ------ --------- ------- ------- ------- ------- ---- -------- ---- ------- --- --------- ------ ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------