首页 html 正文

我要投稿

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

bendan520 html

2023-08-26 0 5,536 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

“这是我参加2022年第一次更新挑战的第四天，活动详情请查看：2022年第一次更新挑战。”

当您滚动浏览时，您可能在许多网站的右下角看到了“返回底部”按钮。单击此按钮可返回页面底部。

这对于任何网站来说都是一个很棒的功能，明天我们将了解如何仅使用 HTML、CSS 和 JavaScript 来构建它。

我们还将了解如何添加位于底部的页面进度条，当我们向上滚动时该进度条会减小，当我们向下滚动时该进度条会减小。

网站制作返回底部按钮

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

body {
  height: 5000px;
}

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

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

让我们快速将 BackToTop 按钮添加到标记中：

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

具有基本样式类的返回底部按钮

我们还可以这样定位键：

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

返回底部按钮的样式

在这里，我们给它一个固定位置，以便即使文档滚动时它也保持在视图中。我们还从屏幕的顶部和侧面将其推进 2rem。

具有渐变背景和右下角显示“返回底部”的固定键的文档

滚动时显示返回底部键

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

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();
};

转到顶部功能

（MDN 参考scrollIntoView()）该函数滚动页面以将其调用的元素带入视图。这里我们在 body 上调用它，这样页面就会滚动到底部。

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

backToTopButton.addEventListener("click", goToTop)

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

就这样！我们已成功将 BackToTop 功能添加到我们的网站。

如何让滚动变得流畅

今天，滚动回到底部是很困难的。让我们看看如何让它变得更流畅。我们可以通过将behavioras smooth 传递给scrollIntoView() 函数来做到这一点。

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

使滚动更顺畅

就这样！现在滚动很流畅。

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

如今，BackToTop 按钮是一个简单的 HTML 按钮，带有一些文本 - 它看起来很难看。那么我们来设计一下吧。在此之前，我们将用 SVG 替换文本，所以让我从 HeroIcons 中快速获取一个：

<button class="back-to-top hidden">

添加 SVG 图标而不是文本到后底键

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

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

对后底部按钮的图标进行样式化以使其可见

这就是我们今天的按钮的样子：

带有样式 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%;
}

为按钮添加一些悬停样式

我们的按钮现在应该如下所示：

返回底部按钮样式

如何让按键输入更流畅

不过html 返回顶部，每当我们滚动时，按钮都会弹出。让我们通过添加过渡来更改这些行为，但我们不会更改显示，而是更改其不透明度：

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