网页中“返回顶部”的html代码怎么编写？

HTML中如何实现回到顶部

直接上代码吧，废话不多说。

HTML:
<button id="backToTopBtn" title="返回顶部" aria-label="返回顶部">↑</button>
CSS： CSS 返回顶部Btn { 显示：无； 位置：固定； 底部：2 0px； 右：2 0 像素； z 指数：9 9 ； 限制：无； 背景颜色：5 5 5 ； 颜色: 白色; 光标：指针； 内边距：1 5 px； 边框半径：1 0px； 字体大小：1 8 px； 过渡：背景色光0.3 s；
backToTopBtn：悬停{ 背景颜色：3 3 3 ；
@media（首选减少运动：减少）{ 返回顶部Btn { 过渡：无； }
@media（指针：厚）{ 返回顶部Btn { 最小宽度：4 4 px； 最小高度：4 4 px； 内边距：1 0px； }
JavaScript： javascript const backToTopBtn = document.getElementById("backToTopBtn"); 常量阈值 = 2 00； // 通过移动 2 00 像素来激活
function toggleButton() { if (document.body.scrollTop > 阈值 || document.documentElement.scrollTop > 阈值) { backToTopBtn.style.display = "锁定"; } 否则{ backToTopBtn.style.display = "无"; }
window.addEventListener("scroll",toggleButton);
backToTopBtn.addEventListener("click", function() { window.scrollTo({ 顶部: 0, 行为: "平滑" }); });
//发现并降低兼容性 _window.onscroll = 函数() { 切换按钮（）； // 检测平滑滚动支持 if (document.documentElement.style 中的“scrollBehavior”) { 返回； // 如果支持，则无需额外处理 } //处理归约 backToTopBtn.addEventListener("点击", function() { window.scrollTo(0, 0); }); };
// 键盘辅助功能 backToTopBtn.setAttribute("tabindex", "0"); backToTopBtn.addEventListener("keydown", 函数 { if (e.key === "Enter" || e.key === " ") { window.scrollTo({ 顶部: 0, 行为: "平滑" }); } });
移动端适配： CSS @media（最大宽度：7 6 8 px）{ 返回顶部Btn { 底部：1 5 像素； 右：1 5 像素； 字体大小：1 6 px； 内边距：1 2 px； }
自定义单页应用程序： javascript if _(window.location.hash) { const 容器 = document.querySelector_(window.location.hash); 如果（容器）{ constscrollTop = 容器.scrollTop; 如果（滚动顶部> 0）{ 切换按钮（）； } }
测试点： 1 . 最新版Chrome、最新版Firefox、最新版Safari、最新版Edge 2 . iPhone 1 2 、Pixel 6 、华为 Mate 4 0 3 .键盘tab测试（按钮是否可以聚焦） 4 . 输入按键测试（如果将启用运动） 5 .测试@media(prefers-reduced-motion)（如果动画关闭）
现场测试即可，不要盲目更改。