如果你正在开发一个网站，并且希望为用户提供一个快速回到页面顶部的按钮，那么 jquery-backtotop 是一个非常不错的选择。这个 npm 包提供了一个简单的方式，让你能够在网站中添加一个 “回到顶部” 的按钮，用户可以单击该按钮，即可快速回到页面顶部。
在本文中，我们将讨论如何使用 jquery-backtotop，并提供详细的指导和示例代码，让你可以更加轻松地在你的项目中集成这个功能。
安装
要开始使用 jquery-backtotop，需要先安装它。你可以在你的项目目录中使用 npm 来安装它：
npm install jquery-backtotop --save
如果你还没有安装 npm，请先安装。
使用
安装完成后，你就可以在你的项目中使用 jquery-backtotop。在页面中添加以下引用：
<script src="node_modules/jquery-backtotop/src/jquery.backtotop.min.js"></script>
然后，你需要实现以下步骤：
- 添加一个 “回到顶部” 的按钮
- 初始化
jquery-backtotop
添加一个 “回到顶部” 的按钮
首先，你需要在页面中添加一个按钮。在示例中，我们将使用一个简单的 HTML 结构：
<a href="#" id="back-to-top" class="btn btn-lg back-to-top" role="button">
<i class="fa fa-chevron-up"></i>
</a>在本例中，我们使用了 btn 和 btn-lg class，这是 Bootstrap 框架的样式，你可以选择使用或不使用。代码中 back-to-top class 是需要的，因为它是 jquery-backtotop 所使用的选择器。
初始化 jquery-backtotop
初始化 jquery-backtotop 很简单，你需要在你的页面中添加以下代码：
-- -------------------- ---- -------
-----------------------------
----------------------------
-- -------------------- - ---- -
---------------------------
- ---- -
----------------------------
-
---
-----------------------------------
-------- ------------------------- - --------
------ ------
---
---这个代码片段的作用是：
- 在用户向下滚动时，显示 “回到顶部” 按钮
- 当用户单击 “回到顶部” 按钮时，平滑地向上滚动到页面顶部
示例代码
在本例中，我们已经添加了一个 "回到顶部" 按钮，并在页面中引用了 jquery-backtotop。下面是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- - ---------------- ------------
----- ---------------- --------------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------------------------------
-------
------
---- ------------------
------------------
--------------------------------
-- -------- ---------------- ---------- ------ ------------ --------------
-- --------- -------------------
----
------
------- ----------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------
--------
-----------------------------
----------------------------
-- -------------------- - ---- -
---------------------------
- ---- -
----------------------------
-
---
-----------------------------------
-------- ------------------------- - --------
------ ------
---
---
---------
-------
-------这个解释非常详细。我们希望这篇文章能够帮助你了解如何使用 jquery-backtotop，并在你的网站中集成 “回到顶部” 按钮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005552f81e8991b448d2627