如何仅使用 css 制作动画返回顶部按钮

网站上有“返回顶部”按钮很重要。它允许用户轻松滚动回到页面顶部。

大多数网站都依赖 JavaScript 根据滚动量切换按钮的可见性。在这篇文章中，我将向您展示如何仅使用 CSS 创建这样的效果。

我们将探讨两种效果——“滑动”效果和“淡入淡出”效果。

如何制作滑动返回顶部按钮

以下是我们在此部分构建内容的概述：

  

    
  
  Back to Top ↑

body {
  display: grid;
  grid-template-columns: auto 0px; 
}

.top {
  --offset: 50px; 

  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));

  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}

p {
  font-size: 25px;
}

如果您滚动，将出现“返回顶部”按钮，该按钮将停留在页面底部。单击该按钮即可返回顶部！

您不会在其中发现 JavaScript。我们只会使用 CSS 来使按钮在您滚动页面时显示。

很酷吧？让我们剖析一下代码，了解其背后的魔力。

HTML 结构

  

    
  
  ...

在 body 标签内，我们创建一个 div 放置网站内容的位置。之后，我们添加“返回顶部”按钮作为链接。

为了本文的目的，我将尽可能简化按钮，但您可以使用任何您想要的按钮（图像、图标等）。您需要做的就是保持 a 与 href="#" .

就这样！我们完成了 HTML 结构。

CSS 代码

我们首先从设计按钮开始。在这一部分，您可以发挥创造力并构建自己的按钮。我将使用一个基本按钮 ( <a class="top" href="#">Back to Top ↑</a> )，其样式如下：

.top {
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
}

这将得到以下结果：

让我们转到主要的 CSS。我们想要的效果使用了两种 CSS 技术：

1. CSS Grid 创建主要结构
2. position: sticky 能够将按钮保持在屏幕底部

我们的结构将是一个两列的网格——一列用于内容，另一列用于“返回顶部”按钮。为此，我们添加以下代码：

body {
  display: grid;
  grid-template-columns: auto auto;
}

得到以下结果：

是的，它看起来很“丑”，但不用担心。这是由于 CSS Grid 的默认拉伸对齐造成的。我们必须禁用它，并使用以下代码将按钮放在底部 place-self: end .

现在我们 position: sticky 通过添加以下代码来介绍：

.top {
  position: sticky;
  bottom: 20px; 
}

由于我们的“粘性”行为，我们的按钮固定在屏幕的右下角。现在我们需要控制该行为以使按钮最初隐藏。为此，我们将使用 margin-top 等于屏幕高度 ( 100vh ) 的值。

看到了吗？我们的按钮仅在滚动屏幕时出现，然后保持不动。我们越来越接近了！

让我们通过添加偏移量来做得更好。我们的 margin-top 结果将是：

.top {
  --offset: 100px; 

  margin-top: calc(100vh + var(--offset));
}

上面的意思是：“滚动 100px 后显示按钮”。我们在屏幕高度上添加一个偏移量（使用 CSS 变量定义）来控制按钮的显示时间。

最后一步是将按钮的列宽改为 grid-template-columns: auto auto 0 grid-template-columns: auto 0px .

哎呀，按钮乱了！由于我们将按钮的空间减少到 0，按钮会尝试通过添加换行符来适应该空间。要解决这个问题，我们只需添加 white-space: nowrap 以禁用换行符。

我们制作了第一个仅使用 CSS 的具有滑动效果的“返回顶部”按钮。

• 您可以调整偏移量来控制按钮出现的时间
• 使用 bottom ， margin-right 您可以控制与屏幕右下角的距离。

别忘了，您可以根据需要轻松设置按钮样式。以下是使用相同代码结构的另一个想法：

  

    
  
  Back to Top ↑

body {
  display: grid;
  grid-template-columns: auto 0px; 
}

.top {
  --offset: 50px; 

  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));

  /* visual styling */
  width: 45px;
  aspect-ratio: 1;
  background: #ff8b24;
  border-radius: 10px;
}

.top:before {
  content: "";
  position: absolute;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}

p {
  font-size: 25px;
}

如何制作淡入淡出的返回顶部按钮

让我们处理第二种按钮，我们将在其中添加“淡入淡出”效果。以下是我们将在此处创建的内容的概述：

body {
  display: grid;
  grid-template-columns: auto 0px; 
}
  
.container-top {
  --offset: 100px;
  --fade: 120px;

  display: flex;
  align-items: flex-end;
  width: 60px;
  justify-self: end;
  justify-content: flex-end;
  -webkit-mask: linear-gradient(#0000 calc(100vh + var(--offset)), #000 calc(100vh + var(--offset) + var(--fade)));
}

.top {
  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 

  /* visual styling */
  width: 100%;
  aspect-ratio: 1;
  background: #ff8b24;
  border-radius: 10px;
}
  
.top:before {
  content: "";
  position: absolute;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}

p {
  font-size: 25px;
}

与之前的效果一样，您将发现零 JavaScript 代码。淡入淡出效果仅使用 CSS 处理。

让我们深入研究一下！

HTML 结构

它与前面的示例非常相似。我们只是在“返回顶部”按钮周围添加了一个额外的包装器。

CSS 代码

我将跳过设置按钮样式的部分，因为它与之前的效果相同。

此效果还依赖于 CSS 网格和 position: sticky 。我们还将使用第三种技术，即属性 mask （模拟淡入淡出效果的技术）。

让我们从主要设置开始：

body {
  display: grid;
  grid-template-columns: auto auto; 
}

.container-top {
  display: flex;
  align-items: flex-end;
  width: 60px;
}

.top {
  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 
}

我们定义两列布局，其中 是 container-top 第二列。我们将后者设为弹性容器，并使用 将按钮放在最底部 align-items: flex-end 。最后，我们使用 position: sticky 将按钮固定在屏幕的右下角。

现在让我们介绍 mask 创建淡入淡出效果的属性。为了理解这个技巧，我将首先使用背景来说明它的工作原理。

在上图中，我应用了以下渐变 container-top ：

.container-top {
  background: linear-gradient(green 100vh, red 0);
}

如果你滚动，你会发现按钮会从绿色区域移动到红色区域。绿色区域等于屏幕高度。

想象一下，绿色区域是“不可见”部分 container-top ，红色区域是“可见”部分。 mask 如果我们考虑相同的梯度，就会发生这种情况。

在最后一个演示中，我们进行了更改 background ， mask 并使用了透明/不透明的颜色组合，而不是绿色/红色的组合。按钮现在仅在滚动时显示！

为了获得淡入淡出效果，我们需要增加两种颜色之间的距离。让我们引入一个 CSS 变量并更新蒙版，如下所示：

.container-top {
  --fade: 120px;
  mask: linear-gradient(#0000 100vh, #000 calc(100vh + var(--fade)));
}

透明色结束于 100vh ，不透明色开始于 100vh + 120px 。我们在透明和不透明之间设置了 的淡入淡出 120px ，从而得到以下结果：

我们快完成了！我们的按钮像预期的那样淡出。我们只是缺少偏移变量来控制淡出效果何时发生。

为此，我们通过引入变量实现与之前的效果相同 offset ：

最后一步是使用以下方法使列宽 container-top 等于 0 grid-template-columns: auto 0px

.container-top {
  --offset: 100px;
  --fade: 120px;
    
  mask: linear-gradient(#0000 calc(100vh + var(--offset)), #000 calc(100vh + var(--offset) + var(--fade)));
}

我们的第二个“返回顶部”按钮完成了！与上一个按钮一样，您可以通过调整 CSS 变量、属性 bottom 和 margin-right 属性来轻松控制偏移、淡入淡出效果和位置。

感谢您的阅读！

要了解更多 CSS 技巧，请在 Twitter .