油猴脚本 | 一个返回顶部和到达底部的按钮

您可以将脚本直接添加到 Tampermonkey。

默认按钮在右下角；单击向上和向下。

变色；平滑滚动。

页面动态加载；后退按钮将不准确。

某些网站存在冲突。

安装后使用

html中怎么添加页面返回顶部按钮 锚点链接技巧

2 02 2 年，我正在某个城市开展一个项目，在网页上添加返回顶部按钮。
我当时很困惑，不知道该怎么做。
后来才知道这个功能的核心就是锚链接的使用。
首先，我在页面顶部添加了一个不可见的链接，代码为：

然后我在页面底部创建了一个后退按钮。
我尝试了两种方法，一种是直接使用链接跳转：
返回顶部
另一种是使用JavaScript集成的按钮来实现平滑滚动：
<button onclick=window.scrollTo({top:0,behavior:'smooth'})">返回顶部</button>
接下来，我使用 CSS 增强了样式，并将按钮固定在页面的右下角。
背景为蓝色，文字为白色：
css A[href = "顶部"] { 位置：固定； 底部：2 0px； 右：2 0 像素； 背景颜色：007 bff； 颜色：白色； 内边距：1 0 像素 1 5 像素； 边框半径：5 px； 文本装饰：无；
我也想实现平滑滚动，所以尝试了另外两种方法，一种是使用CSS全局启用平滑滚动，另一种是通过JavaScript来实现：
css { 滚动行为：平滑；
JavaScript window.scrollTo({top:0,behavior:'smooth'});
在用户体验方面，我使用JavaScript来监听滚动事件，并在用户滚动一定距离时显示按钮：
javascript window.addEventListener('滚动',function(){ const 按钮 = document.querySelector('a[href="top"]'); if(window.pageYOffset>2 00){ Button.style.display='块'; }其他{ Button.style.display='无'; } });
我还想给按钮添加动画效果，比如淡入淡出，所以我使用CSS添加了一个过渡效果：
css A[href = "顶部"] { 不透明度：0； 过渡：不透明度 0.3 秒 简单； } a[href = "顶部"].display { 不透明度：1 ；
接下来，我使用 JavaScript 将类名动态添加到视图控件中：
javascript // 动态添加类名 const 按钮 = document.querySelector('a[href="top"]'); if(window.pageYOffset>2 00){ Button.classList.add('显示'); }其他{ Button.classList.remove('显示');
我还想使用图标而不是文本以获得更好的可见性，因此我向按钮添加了一个图标：

对于单页应用程序（SPA），我需要抑制默认锚点行为并手动执行滚动：
javascript 永久链接 = document.querySelector('a[href="top"]'); link.addEventListener('点击', 函数(事件){ Event.preventDefault(); window.scrollTo({top:0,behavior:'smooth'}); });
为了整合框架，我在Vue和React项目中使用了不同的方法来实现滚动控制。

最后，我还改进了响应式设计，使用媒体查询来调整不同设备上按钮的位置和大小也得到了改进。
同样对于触摸设备，增加按钮点击区域并隐藏移动设备上的按钮。

通过上述方法，我成功创建了一个功能齐全且美观的返回顶部按钮，极大地提高了用户体验。

html css 返回顶部按钮位置怎么固定。

起初我在布局网站时想不通这个CSS情况，但现在想起来，其实挺简单的。
我们来谈谈这个情况。

首先，这种情况就像您在手机上搜索地图上的地点一样。
你设定一个点，然后告诉手机定位“右2 0px，下1 00px”，手机就会带你到那个位置。
在CSS中，这个功能是通过编写样式来实现的。

例如，您为一个元素编写以下 CSS 代码：{position:fixed;右：2 0px； bottom:1 00px;}，相当于说：“嘿，这个元素被固定到这个位置。
距离浏览器右侧 2 0px，距离底部 1 00px。
”
这个“fixed”关键字很重要。
这告诉浏览器，无论页面如何滚动，该元素都将保持距右侧 2 0px 和距底部 1 00px 的距离。
与一些定位方式不同，比如“静态”，即“我就在那里，你想移动就移动”。

再次强调，这种定位是基于“正文”的，即以整个网页为参考点。
另外，因为它是“固定的”，所以它遵循浏览器窗口，而不是页面内容。
因此，当你滚动页面时，这个元素的位置不会改变。

当我学习这个时，我很困惑。
后来，随着实践的增多，我渐渐明白了。
这个位置特别适合浮动按钮和导航栏之类的东西。
它们的位置始终固定，不会因页面滚动而消失。

本质上，这种CSS定位就像在网页上的元素上设置定位器，告诉它停留在哪里。
是。
如果使用得当，页面布局会看起来更干净，用户体验也会更好。