滚动到顶部或底部按钮

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

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

Author
Techwb
Daily installs
0
Total installs
893
Ratings
11 0 0
Version
2.2.1
Created
2023-03-04
Updated
2024-03-13
Size
3.6 KB
License
MIT
Applies to
All sites

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(蓝色),执行将页面滚动到上一次滚动的位置之后,按钮文本变成“回到顶部”,方便再次回到顶部的操作。
如图所示:

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

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