html - 使用 href="#" 使页面滚动到顶部

Question

在可滚动页面的底部，我有一个“返回顶部”按钮，我不确定是否仅href="#"用于完成这项工作。我也知道一些解决相同问题的函数/脚本，但我非常喜欢这种非常简单的方法。

所以我的问题是：href="#"如果是关于滚动顶部作业，使用的具体缺点或危险是什么？

标签： html

Answer 1

锚标记用于在页面内导航。如果您将此留空，则正常行为将是滚动到页面顶部。您乱七八糟地链接到死胡同，这是一种不良行为。我建议在您的页面顶部添加一个视觉上隐藏的跨度并给这个 div 一个 ID。这样你就可以在你的href中引用这个ID。使用scroll-behavior: smooth属性，您可以通过这种方式添加非常平滑的滚动功能

其他解决方案将是 javascript。

div{ height: 100vh; }
a { position: fixed; top: 50%; left: 50vh; }
#upper{ position: absolute; top: 0; }

<span id="upper"></span>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<a href="#upper">Back to top</a>