在 Web 开发中，我们经常需要为用户提供一种方便快捷的滚动到页面顶部或底部的功能。elevator.js 是一个非常好用的 npm 包，它可以帮助我们快速实现这个功能。本文将详细介绍使用 elevator.js 的步骤以及各种配置选项。
安装
在命令行中执行以下命令即可安装 elevator.js：
--- ------- -----------
基本使用
在 HTML 文件中引入 elevator.js：
------- -------------------------------------------------------------
在 JavaScript 中创建一个 Elevator 实例，并调用 elevate() 方法即可：
----- -------- - --- ---------- -------------- ------------------------------------------ --- -------------------
上述代码做了两件事情：
- 创建了一个 Elevator 实例，传入了一个配置对象；
- 调用了
elevate()方法，启动了电梯效果。
其中，targetElement 属性指定了触发电梯效果的元素，这里指定为 ID 为 elevator-button 的元素。
你也可以通过设置 duration 属性来控制电梯运行的时间（单位为毫秒）：
----- -------- - --- ---------- -------------- ------------------------------------------- --------- ---- -- ----- - - --- -------------------
高级配置
除了上述基本用法外，elevator.js 还提供了许多高级配置选项。下面是一些常用的配置选项：
elementToScroll
指定要滚动的元素，默认为整个页面的根元素 document.documentElement。
----- -------- - --- ---------- -------------- ------------------------------------------- ---------------- --------------------------------------- --- -------------------
easingFunction
指定电梯运行的缓动函数，默认为 easeInOutCubic。
----- -------- - --- ---------- -------------- ------------------------------------------- --------------- -------- --- -------------------
mainAudio
指定电梯到达顶部或底部时播放的音频文件，默认为 null。
----- -------- - --- ---------- -------------- ------------------------------------------- ---------- ------------------- --- -------------------
endAudio
指定电梯停止运行时播放的音频文件，默认为 null。
----- -------- - --- ---------- -------------- ------------------------------------------- --------- ------------------- --- -------------------
startCallback 和 endCallback
分别在电梯开始和结束运行时执行的回调函数。
----- -------- - --- ----------
-------------- -------------------------------------------
-------------- -- -- -
----------------------
--
------------ -- -- -
----------------------
-
---
-------------------示例代码
下面是一个完整的示例，包含了上述基本用法和高级配置：
--------- -----
------
------
----- ----------------
------------------ ------------
-------
------
---- ---------------------
---- --------- ---
------
------- ----------------------------------
------- -------------------------------------------------------------
--------
----- -------- - --- ----------
-------------- -------------------------------------------
---------------- ----------------------------------------
--------- -----
--------------- ----------------
----
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------