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

嘿，你的文章听起来像是一篇教程。
What I want is to chat! 😅
上周，一位客户问我为什么在他的网站上添加返回顶部按钮有点愚蠢。
它突然跳起来或者按钮一直悬在一边。
我当面斥责他：“你可能做得不太好！”
其实关键是使用锚点。
简单来说，就是在页面顶部添加一个小标记，然后在按钮上方写字，然后单击即可转到该页面。
这是最原始的，你甚至不需要担心浏览器自带的滚动。

但是跳转依然困难，用户体验很差。
所以现在我们正在做平滑滚动，也就是滚动行为：smooth; this line of CSS.但请注意，较旧的浏览器版本可能不支持此功能，因此您必须做出决定。

上次在上海做一个项目，客户要求兼容IE1 1 我不敢使用这种平滑滚动功能。
我直接使用 JavaScript 创建了 window.scrollTo({ top: 0, Behaviour: 'smooth' });。
虽然代码多了一点，但至少是兼容的。

接下来是如何放置按钮。
你说放在右下角，我建议放在右下角，方便看到。
CSS可直接编辑：position:fixed;底部：2 0px； right: 2 0px;. But there's a pitfall.滚动时将按钮文本调高可能会刺激您的眼睛。
我一般喜欢把小图标朝上，比如，这样更直观，也不占空间。

而且这个按钮并不总是可见的。
它仅在滚动 2 00 像素后出现，并在滚动太多后消失。
This feels right.这就需要使用JavaScript来监听滚动事件window.addEventListener('scroll', function() {...})，然后根据滚动距离来控制按钮的显示。

顺便说一句，还有响应式设计。
手机上的按钮位置和大小都要调整，不能像电脑上那么大。
例如，我上次在深圳建了一个电子商务网站，手机屏幕很小，所以我把按钮做得更小，并添加了一些阴影，看起来更专业。

还有一些单页应用程序，例如 React 和 Vue，可以自行管理滚动。
直接上面调用可能没有反应。
您必须添加 event.preventDefault() 以防止默认行为，然后手动调用滚动。

无论哪种方式，找到它都取决于你。
先构建基本功能，然后逐步优化。
用户体验必须注重每一个细节。
我还在想一个问题，按下按钮有没有动作？下次我会和大家分享更好的方法。

html返回首页的方法有哪些

超链接是最简单的。
直接使用即可返回主页面。
不需要JS。

JS 使用 _window.location.href="index."。
添加 return false 以防止默认事件。

历史日志使用 window.history.go(-1 )。
但当用户直接访问时无效。

更换不会留下任何历史记录。
刷新影响体验。
锚点用于单页应用程序中的内部跳转。

根据需要选择。
在大多数情况下，超链接就足够了。

html中怎么从一个页面跳转到另一个页面