滚动到顶部或底部按钮

在网页添加一个“回到顶部”的按钮，可以快速回到页面顶部。

Tác giả
Techwb
Cài đặt hàng ngày
1
Số lần cài đặt
782
Đánh giá
11 0 0
Phiên bản
2.2.1
Đã tạo
04-03-2023
Đã cập nhật
13-03-2024
Giấy phép
MIT
Áp dụng cho
Tất cả trang web

2.2版：添加在页面不滚动时自动隐藏按钮的功能，滚动时则显示按钮的功能（默认3秒）。
即使用setTimeout和clearTimeout函数，以便在滚动停止后一定时间内隐藏按钮。
设置了计时器在 3000 毫秒（3 秒）后隐藏按钮。
============================
2.1版：
觉得按钮有点大，可以更改按钮textContent的值改成向下或向上符号形式。
比如在源代码中直接搜索替换，把“回到顶部”替换为“▲”，“滚回底部”替换为“▼”。
PS：
1、“回到顶部”有四处，“滚回底部”只有一处。
2、按钮位置如果被其他脚本或网站元素遮挡，可以修改以下两处的值（建议都改成20%刚刚好）：
scrollButton.style.bottom = '20%'; // 设定距离底部的距离
scrollButton.style.right = '20px'; // 设定距离右侧的距离

2.1版已按照此更改，不喜欢这一版的，可以在以上历史版本中点击对应版本号降级退回。

============================
2.0版：
使用滚动条的 scroll 事件，监控滚动条（用户）“向下”还是“向上”的意图（手动稍微将滚动条向上或向下移动），动态实现是否“滚回底部（蓝色）”还是“回到顶部（红色）”。

=============================

1.4版，添加“回到底部”功能，不过这是回到上一次滚动的位置。
“回到顶部”，则将背景颜色设为 red（红色），执行将页面滚动到顶部的逻辑，回到顶部后此时按钮文本变为“回到底部”，方便再次回到底部的操作；
“回到底部”，则将背景颜色设为 blue（蓝色），执行将页面滚动到上一次滚动的位置之后，按钮文本变成“回到顶部”，方便再次回到顶部的操作。
如图所示：

==============================
==============================

在网页添加一个“回到顶部”的按钮，可以快速回到页面顶部。
如图所示：