回到顶部：巧妙运用原生JS实现网站置顶功能，轻松引领用户观览

2023-07-10 05:37:51

回到顶部：使用原生 JS 增强您的网站体验

一、回到顶部按钮的重要性

对于任何网站而言，一个方便易用的回到顶部功能至关重要。它为用户提供了一种快速而轻松的方式返回页面的顶部，大大提高了浏览体验，特别是在内容较长的网页上。

二、使用原生 JS 实现回到顶部按钮

1. HTML 结构

在 HTML 代码中，添加一个具有唯一 ID（通常为“back-to-top”）的元素，以便在页面上轻松识别它。

<a href="#" id="back-to-top">回到顶部</a>

2. CSS 样式

使用 CSS 样式表设置“back-to-top”元素的样式，包括位置、大小、颜色和悬停效果等。

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  color: #000000;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#back-to-top:hover {
  opacity: 1;
}

3. JavaScript 代码

使用 JavaScript 代码监听页面滚动事件。当页面向下滚动时，显示“back-to-top”元素，当页面向上滚动时，隐藏它。

const backToTop = document.getElementById("back-to-top");

window.addEventListener("scroll", () => {
  if (window.pageYOffset > 100) {
    backToTop.style.opacity = 1;
  } else {
    backToTop.style.opacity = 0;
  }
});

backToTop.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
});