使用 HTML、CSS 和 JavaScript 制作返回顶部按钮和页面进度条

AirStar
3,199 阅读6分钟

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

当你滚动浏览时，你可能已经在许多网站的右下角看到了一个“返回顶部”按钮。单击该按钮可返回页面顶部。

这是任何网站都具备的一个很棒的功能，今天我们将看看如何只用 HTML、CSS 和 JavaScript 来构建它。

我们还将研究如何添加一个页面进度条，它位于顶部，当我们向下滚动时进度条会增加，而当我们向上滚动时进度条会减少。

网站制作返回顶部按钮

首先，我要使网站的主体变大，以便可以滚动：

body {
  height: 5000px;
}

我还将在文档正文中添加一个线性渐变，以便我们可以知道文档正在滚动：

body {
  height: 5000px;
  background: linear-gradient(#00ff04, #09aad3);
}

让我们快速将 Back To Top 按钮添加到标记中：

<button class="back-to-top">Back To Top</button>

带有基本样式类的返回顶部按钮

让我们也像这样定位按钮：

.back-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
}

返回顶部按钮的样式

在这里，我们给它一个固定的位置，这样即使文档滚动它也能保持在视图中。我们也2rem从屏幕的底部和右侧推动它。

image.png 具有渐变背景和固定按钮且右下角显示“返回顶部”的文档

滚动时显示返回顶部按钮

首先，我们需要在用户打开网站时隐藏按钮。我们还需要确保添加这种样式，与按钮的基本样式分开，因为按钮需要在滚动时显示。

HTML：

<button class="back-to-top hidden">Back To Top</button>

带有隐藏类和基本样式的返回顶部按钮

CSS：

.hidden {
  display: none;
}

不显示的隐藏类

这是有条件地显示按钮的代码：

const showOnPx = 100;
const backToTopButton = document.querySelector(".back-to-top")

const scrollContainer = () => {
  return document.documentElement || document.body;
};

document.addEventListener("scroll", () => {
  if (scrollContainer().scrollTop > showOnPx) {
    backToTopButton.classList.remove("hidden")
  } else {
    backToTopButton.classList.add("hidden")
  }
})

有条件地显示/隐藏按钮的代码

在这里，scrollContainer函数返回document.documentElement，它只是我们文档的 HTML 元素。如果不可用，document.body则返回该元素。

接下来，我们将在文档中添加一个事件侦听器，该事件侦听器将在滚动时触发回调函数。我们从各自获得的scrollTop（MDN 参考scrollContainer）值只不过是该元素从顶部滚动的像素数。

在这里，当该值高于我们的设置showOnPx值时，即100px我们从按钮中删除隐藏类。如果不是这样，我们将类添加到按钮（当用户手动向上滚动时特别有用）。

现在，让我们处理每当用户单击按钮时滚动到顶部的逻辑。

单击返回顶部按钮时如何滚动到顶部

const goToTop = () => {
  document.body.scrollIntoView();
};

goToTop 功能

( MDN 参考scrollIntoView())函数滚动页面以将其被调用的元素显示在视图中。在这里，我们在 body 上调用它，因此页面将滚动到顶部。

现在，我们需要在单击返回顶部按钮时调用此函数：

backToTopButton.addEventListener("click", goToTop)

调用goToTop()返回顶部按钮的点击

而已！我们已成功将 Back To Top 功能添加到我们的网站。

如何使滚动平滑

现在，回到顶部的滚动非常苛刻。让我们看看使它更平滑。我们可以通过将behaviouras传递smooth给scrollIntoView()函数来做到这一点。

const goToTop = () => {
  document.body.scrollIntoView({
    behavior: "smooth",
  });
};

使滚动更流畅

而已！现在滚动很流畅。

如何设置“返回顶部”按钮的样式

现在，Back To Top 按钮是一个带有一些文本的简单 HTML 按钮——看起来很丑。所以让我们设计它。 在此之前，我们将用 SVG 替换文本，所以让我快速从HeroIcons 中获取一个：

<button class="back-to-top hidden">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="back-to-top-icon"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M7 11l5-5m0 0l5 5m-5-5v12"
    />
  </svg>
</button>

将 SVG 图标而不是文本添加到返回顶部按钮

我们给图标一个名为 的类back-to-top-icon。这很重要，因为图标不会立即可见，因此需要设置样式才能可见。

.back-to-top-icon {
  width: 1rem;
  height: 1rem;
  color: black;
}

样式化返回顶部按钮的图标以使其可见

这就是我们的按钮现在的样子：

带有样式 SVG 图标的按钮

带有样式 SVG 图标的按钮

按钮看起来仍然很丑，所以让我们给它设置样式：

.back-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  border-radius: 100%;
  background: #141c38;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
}

为按钮设计样式以使其看起来不错

现在，我们按钮中的向上箭头不可见，让我们将其颜色更改为较浅的颜色，使其可见：

.back-to-top-icon {
  width: 1rem;
  height: 1rem;
  color: #7ac9f9;
}

更新了“返回顶部”按钮箭头图标的样式

我们还可以添加一个悬停效果，让它更好一点：

.back-to-top:hover {
  opacity: 60%;
}

为按钮添加一些悬停样式

现在，我们的按钮应该是这样的：

样式返回顶部按钮

样式返回顶部按钮

如何让按钮的输入更流畅

每当我们滚动时，该按钮似乎突然出现。让我们通过添加过渡来改变这种行为，而不是改变显示，我们将改变它的不透明度：

.back-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  border-radius: 100%;
  background: #7ac9f9;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
  opacity: 100%;
  transition: opacity 0.5s;
}

为按钮的不透明度添加过渡

.hidden {
  opacity: 0%;
}

将隐藏类设置为不透明度为 0%

这也使我们的悬停效果更加平滑。

现在让我们关注页面进度条。

网站添加页面进度条

我们将使用div. 当用户滚动页面时，我们将确定滚动百分比并不断增加width. 让我们添加第div一个并给它一个类名progress-bar：

<div class="progress-bar" />

页面滚动进度条标记

现在我们将为其添加一些样式：

.progress-bar {
  height: 1rem;
  background: white;
  position: fixed;
  top: 0;
  left: 0;
}

页面滚动进度条样式

我们正在修复它，以便在用户滚动时可见。我们也将其定位在页面顶部。

现在，让我们添加设置进度条宽度的 JavaScript：

const pageProgressBar = document.querySelector(".progress-bar")
document.addEventListener("scroll", () => {
  const scrolledPercentage =
      (scrollContainer().scrollTop /
        (scrollContainer().scrollHeight - scrollContainer().clientHeight)) *
      100;
  
  pageProgressBar.style.width = `${scrolledPercentage}%`
  
  if (scrollContainer().scrollTop > showOnPx) {
    backToTopButton.classList.remove("hidden");
  } else {
    backToTopButton.classList.add("hidden");
  }
});

计算滚动百分比和设置进度条图的代码

请注意，我们正在使用我们现有的文档滚动事件侦听器函数。

这是我们的进度条在滚动时的样子：

滚动页面滚动进度条

滚动页面滚动进度条

如何计算滚动百分比

计算滚动百分比实际上非常简单。( MDN ReferencescrollTop )属性是如前所述滚动的像素数。

scrollHeight（MDN 参考）是在它被调用的元素中适合其所有子元素所需的最小高度。

最后，clientHeight（MDN 参考）是它被调用的元素的内部高度。

从clientHeight中减去 ，scrollHeight因为如果我们不这样做，可见区域也会被考虑在内，因此我们永远不会达到 100% 滚动。

我整理了这张图来更好地解释它：

解释 clientHeight 和 scrollHeight 的屏幕截图

截图解释clientHeight和scrollHeight

在这里，没有箭头的线代表clientHeight我们可以看到的内容的高度。带箭头的线代表scrollHeight并且表明这条线在两个方向上都继续。这是适合所有内容所需的视图高度。

最后，该scrollTop值除以 和 的差，scrollHeight我们clientHeight得到滚动量的十进制值。乘以100得到我们用来确定宽度的百分比值，即我们div的进度条上的进度。

结论

我希望这篇文章对你有所帮助，并且能够在你的网站上实现返回顶部按钮和页面进度条。

avatar
文章
阅读
粉丝