后端开发教程 - Java、Spring Boot 实战 - msg200.com
不使用 JavaScript 制作“返回顶部”按钮
“返回顶部”按钮
“返回顶部”按钮
这是我关于如何在不使用 JavaScript 的情况下制作“返回顶部”按钮的教程。另请参阅这些非常有用的设计指南。如果我可以改进一些地方，尤其是在可访问性方面有所遗漏，请在评论区告诉我。
为什么？
我最近为一位自由撰稿记者建立了一个作品集网站，她需要一个轻量级的作品集网站（我与Eleventy合作完成了这个网站），她可以在这个网站上托管她的文章并让访问者与她联系。
当我开始设计全文页面本身时，我想为读者提供一个返回顶部的按钮，因为那里有读者阅读后可能会感兴趣的信息：一个下载原始文章 PDF 的链接，另一个在线文章的链接，以及诸如写作时间等详细信息。
如何实现？
我问过谷歌这是怎么实现的——我发现在深入代码之前，了解不同的解决方案视角很有帮助。我惊讶地发现，每个答案都涉及使用 JavaScript / jQuery。除非我遗漏了什么，否则大多数可以用 CSS 完成的布局代码都应该用 CSS 完成。JavaScript 更容易崩溃，需要浏览器做更多工作，而且并非所有用户都运行 JavaScript。
如果您已经了解 CSS 的position属性，请跳至代码。
进入position
我们需要了解各种 CSS 位置：
static：这是每个元素的默认值，并且仅以便在描述其他位置的作用时引用它。一个更有帮助的名字可能是none。您唯一需要使用它的时候是删除一个已经在特定于其他位置的声明块position中设置的元素，即您永远不需要使用它（只需从另一个块中删除该属性）。想象为“未定位”，因为它恰好位于页面上的最终位置。这非常有用，因为您希望大多数元素“最终”位于您期望的位置......只是您不需要应用此属性即可实现这一点。据我所知，这是关于该位置的最多文章。positionstaticstaticrelative：这会根据您预期的位置（即其位置）确定元素在页面上的相对static位置。如果添加，left: 20px;它将从预期位置的左边缘移动 20px。如果您创建了一个元素，relative但没有同时更改其位置，它可能看起来什么也没发生，但您的 CSS 现在已经知道它在那里是故意的（与“未定位”元素不同static），因此现在可以将其用作任何子元素的参考。absolute：定位元素将相对于其最近的父元素（如果其父元素不是，或者没有父元素）absolute在页面上的任何位置。使用此选项，元素的顶部将与其最近的定位父元素的顶部对齐。staticbodytop: 0;absolutefixed：设置元素相对于窗口而不是页面上任何内容的位置 -fixed例如，您可以在顶部看到的 Dev.to 导航栏是，因此它会随您的屏幕滚动而不是随页面滚动（除非您在设置中更改了此默认值）。sticky：这在relative和之间切换fixed。它会像一个relative元素一样，直到它到达其sticky位置，并停fixed留在那里，直到其包含元素不再容纳其位置，然后再次切换回来。此 CSS自 2013 年起就已存在，根据caniuse 的数据position，在使用 -webkit- 前缀时，全球使用率高达 95% 。
整合起来
因此，我们将创建一个带有滚动条（ ）的relative页面（ ） ，其中包含一个按钮（呃，“按钮”实际上是一个锚元素，因为它是导航而不是触发事件......所以我们从现在开始称它为链接：）。<main>absolute<div>sticky<a>
我们不想在已经位于顶部时导航“返回顶部”，因此滚动条应该从屏幕加载位置的下方开始，即距离顶部至少 100% 的视口高度main。一旦我们看到链接，我们希望它停留在右下角，因为这是用户期望找到它的地方。假设<footer>页面末尾有一个，我们想阻止链接滚动到底部<main>，因此滚动条也会从底部偏移。
以下是不使用任何 JavaScript 的“返回顶部”链接的最基本实现：
HTML
<body>
<main>
<section>Words</section> <!--your page content-->
<div class="scroll-top"> <!--scrollbar at the end of main-->
<a class="scroll-top__link" href="#">Back to top</a> <!--href="#" navigates to the top of the page-->
</div>
</main>
<footer>Footer</footer>
</body>
CSS
main {position: relative;} /* to place scrollbar /
section {height: 300vh;} / so we can scroll /
footer {height: 5rem;} / a typical footer height */
.scroll-top {
position: absolute; /* relative to its positioned <main> parent /
top: 120vh; / starts below the bottom of the screen /
bottom: 3rem; / stops scrolling before the end /
right: 2rem; / offset from right hand side */
}
.scroll-top__link {
position: -webkit-sticky; /* for Safari /
position: sticky; / 'relative' until element reaches... /
top: 90vh; / 90% viewport height from the top, when it becomes 'fixed' - until its container toggles it back to 'relative' */
}
JavaScript
˙\_(ツ)_/˙
最终产品
我列出了所有元素的概要，以便您了解它们position是如何发挥作用的。
让我们添加大量的文本<section>，这样我们就不必随意设置它们的高度了，并在 CSS 中引入平滑滚动、颜色、悬停不透明度和一些填充。实际效果如下：
就是这样，您只需创建一个“返回顶部”链接，无需任何 JavaScript。
编辑：href="#"锚标记告诉浏览器滚动到页面顶部而不添加历史记录，因此这不会影响用户导航。
后来编辑：div/隐形滚动条显然位于页面顶部，因此其下方的任何内容都无法点击。这对于按钮路径下方文本中的链接来说是一个问题。