在网页中，有时候需要用户向下滚动页面浏览长内容。但是当页面滚动的很远时，需要用户向上滚回到页面顶部。为了方便用户，我们可以添加一个“返回顶部”按钮。而且如果能够给这个按钮添加缓冲效果，用户体验会更好。本文将介绍如何使用原生JS实现该功能。
实现步骤
- HTML结构
首先，在HTML页面上添加一个返回顶部按钮。例如：
<button id="back-to-top">返回顶部</button>
- CSS样式
为了让返回顶部按钮始终停留在页面右下角，并且在不同屏幕尺寸下都能正常显示，我们需要用CSS来设置其样式。例如：
-- -------------------- ---- ------- ------------ - -------- ----- --------- ------ ------- ----- ------ ----- ---------- ----- ----------------- ----- ------ ----- ------- ----- -------- ----- ------- -------- -------- ----- -------------- ---- -
其中，display属性设置为none表示初始状态下不显示，position属性设置为fixed表示固定在页面上，bottom和right属性设置为20px表示距离底部和右侧各20像素。其他属性用于美化按钮。
- JS实现
接下来，我们使用JS为按钮添加点击事件，并实现回到页面顶部的效果。代码如下：
-- -------------------- ---- -------
-- --------
--- ------------ - ---------------------------------------
-- ------
-------------------------------------- -------- -- -
-- --------
--- --------- - ------------------ -- -----------------------------------
-- ---------
--- -------- - ----
--- -------- - -----------
-- -----------------
--- ---- - ------------------ - --------- - -----
--- -------- - -------- - ---------------
-- ------
-------- --------- -
--------- -- -----
-- ------ - - -- --------- -- -- -- ----- - - -- --------- -- --- -
------------------ ---
-------
-
------------------ -----------
------------------- ----------
-
-- ----
----------
---代码分为三个部分：
- 获取返回顶部按钮
- 添加点击事件
- 实现缓冲效果的动画函数
动画函数实现的缓冲效果是通过不断修改scrollTop值来实现的。其中，计算每一帧需要滚动的距离和时间间隔的公式比较重要，可以根据需求自行调整。
- 完整代码
HTML代码：
<button id="back-to-top">返回顶部</button>
CSS代码：
-- -------------------- ---- ------- ------------ - -------- ----- --------- ------ ------- ----- ------ ----- ---------- ----- ----------------- ----- ------ ----- ------- ----- -------- ----- ------- -------- -------- ----- -------------- ---- -
JS代码：
-- -------------------- ---- -------
--- ------------ - ---------------------------------------
-------------------------------------- -------- -- -
--- --------- - ------------------ -- -----------------------------------
--- -------- - ----
--- -------- - -----------
--- ---- - ------------------ - --------- - -----
--- -------- - -------- - ---------------
-------- --------- -
--------- -- -----
-- ------ - - -- --------- -- -- -- ----- - - -- --------- -- --- -
------------------ ---
-------
-
------------------ -----------
----------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------