也许向用户提供此功能的最简单方法是链接到 <html>
元素上的 ID。 就像这样……
<html id="top">
<body>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>
但我们这里有几个选项。
如果您希望它平滑滚动到顶部,则可以在 CSS 中执行此操作。
html {
scroll-behavior: smooth;
}
请注意,在 HTML 元素上放置这样的属性是包罗万象的行为,您对此没有太多控制权。
在这种情况下,我们也没有链接到可聚焦元素,这意味着焦点不会改变。 这可能很重要,所以这样会更好
<html>
<body>
<a id="top"></a>
<!-- the entire document -->
<a href="#top">Jump to top of page</a>
</body>
</html>
它更好,因为焦点会移动到该锚点标签,这对使用键盘或辅助技术的人来说很好。
但这些都需要点击。 您可能需要在 JavaScript 中触发滚动,在这种情况下
window.scrollTo(0, 0);
……是将窗口(或任何其他元素)滚动回顶部的可靠方法。 其滚动行为也由 CSS 决定,但如果您没有这样做,则可以在 JavaScript 中强制平滑度
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
有关平滑滚动的更完整的故事,我们有一个页面专门介绍它。
我建议将顶部标签制作成一个 span。 没有 href 的锚点标签会被无障碍扫描程序标记。
一直想知道为什么不是 body,这里是否有禁止使用 body 标签的规则?
IMO,“scroll: smooth” 的使用已经失控了。
当您被迫等待几秒钟才能完成滚动动画时,浏览长文章变得很乏味。 这个问题在手机上更加严重,因为小屏幕导致垂直页面变长,并且会对电池寿命产生负面影响,因为 GPU 正在运行。
这太棒了,也让我想起了你创建 css-tricks 的原因。 巧妙的代码片段可以提高开发人员的效率。
我最近注意到,手机有时需要这个功能才能将用户带回顶部,以便在通常位于页脚的主要架构之外进行进一步导航。
无需为任何元素指定 top 的 ID。 默认情况下,所有主要浏览器都会默认加载页面的顶部,只需引用该 ID 或 # 即可。 例如
<a href="#top">
或<a href="#">
谢谢 Chris!
快速说明:小心 scroll-behavior,它与 iOS Safari 不兼容 :) https://caniuse.cn/#search=scroll-behavior
我发现返回顶部锚点即使未定义“顶部”的 ID/类也能正常工作。 但是平滑滚动需要目标锚点或具有定义的“顶部”ID 的元素才能工作。 为什么会这样我也不知道。“顶部”是否已在 DOM 中定义?
当使用它来定位页面的特定部分时,我想当网站具有固定导航栏时,这实际上不起作用,对吧? 滚动到特定目标时可能不会考虑导航栏的高度。 我的意思是,目标将在导航栏下方,因此不可见。