如何使用 html、css 和 javascript 制作返回顶部按钮和页面进度条

您可能在浏览许多网站时，在右下角看到过“返回顶部”按钮。单击该按钮即可返回页面顶部。

这是任何网站上都具备的很棒的功能，今天我们将了解如何仅使用 HTML、CSS 和 JavaScript 来构建它。

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

请注意，您可以将其添加到任何网站，无论是现有网站还是您刚开始开发的网站。唯一的要求是网站应具有足够的内容（或足够大的 body 高度）以便可滚动，否则添加它就没有意义了。

以下是我们将要构建的 CodePen（滚动查看神奇之处）：

如何为你的网站制作返回顶部按钮

首先，我要把网站主体弄大一些，以便可以滚动：

body {
  height: 5000px;
}

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

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

我们还快速将“返回顶部”按钮添加到标记中：

Back To Top

我们将按钮定位如下：

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

也从屏幕的底部和右侧 2rem 推动它

我们的文档现在应该是这样的：

现在，到了最有趣的部分——添加逻辑。

如何仅在滚动时显示“返回顶部”按钮

现在，我们不希望“返回顶部”按钮始终可见 - 比如当用户位于页面顶部时。所以我们将有条件地显示它。

对于此示例，我们仅当用户滚动至少 100 像素时才显示它。

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

HTML：

Back To Top

样式表：

.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 ，我们从按钮中删除 hidden 类。如果不是这种情况，我们将该类添加到按钮（当用户手动向上滚动时特别有用）。

现在，让我们研究一下用户单击按钮时滚动到顶部的逻辑。

如何在用户点击“返回顶部”按钮时滚动到顶部

让我们快速编写一个函数来实现这一点：

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

（ scrollIntoViewMDN 参考) ( 函数 滚动页面以将其调用的元素带入视图。这里我们在主体上调用它，因此页面将滚动到顶部。

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

backToTopButton.addEventListener("click", goToTop)

就这样！我们已成功将“返回顶部”功能添加到我们的网站。

如何让滚动变得流畅

现在，返回顶部的滚动效果相当粗糙。让我们看看如何让它更平滑。我们可以通过将 behaviour as smooth 给 scrollIntoView() 函数来实现这一点。

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

就这样！现在滚动起来又顺畅又流畅。

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

现在，“返回顶部”按钮是一个带有一些文本的简单 HTML 按钮，看上去相当丑陋。因此，让我们对其进行样式设计。

在此之前，我们要用 SVG 替换文本，因此让我快速从 HeroIcons :

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

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

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

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

.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%;
}

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

现在我们来关注一下页面进度条。

如何向您的网站添加页面进度条

我们将使用 制作一个进度条 div 。当用户滚动页面时，我们将确定滚动的百分比并不断增加 width 。让我们添加第 div 一个并给它一个类名 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");
  }
});

请注意，我们正在使用现有的文档滚动事件监听器功能。

我们的进度条滚动时应该是这样的：

如何计算滚动百分比

计算滚动百分比其实很简单。 scrollTop （ MDN 参考 ）属性就是前面提到的滚动像素数。

scrollHeight （ MDN 参考 ）是调用该元素时容纳其所有子元素所需的最小高度。

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

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

我整理了这个图表以便更好地解释它：

这里，没有箭头的线表示 ，也 clientHeight 就是我们可见内容的高度。带箭头的线表示 ， scrollHeight 表示这条线在两个方向上延伸。这是容纳所有内容所需的视图高度。

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

结论

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

如果您想问我任何问题， Twitter 上联系我

资源

• 此示例的 CodePen
• scrollIntoView() 的 MDN 参考
• scrollTop 的 MDN 参考
• scrollHeight 的 MDN 参考
• clientHeight 的 MDN 参考

查看。 https://www.devkit.one/ .