JS回到顶部|极客笔记

JS回到顶部

在网页开发中，经常会遇到一个需求，即当用户向下滚动页面时，让页面中的一个按钮或元素能够使页面滚动到顶部。这个功能通常被称为“回到顶部”功能。在本文中，我们将详细讨论如何使用JavaScript实现这一功能。

实现原理

实现“回到顶部”的功能的核心原理是通过监听用户的滚动事件，当用户滚动页面时，判断当前页面的滚动位置，如果达到某一个阈值（比如100px），则显示回到顶部的按钮；点击回到顶部的按钮时，通过平滑的动画效果使页面滚动到顶部。

HTML结构

首先，在HTML中我们需要添加一个按钮或其他元素，作为用户点击后触发回到顶部的操作。

<button id="backToTop">回到顶部</button>

CSS样式

为了让回到顶部的按钮看起来更加美观，我们可以为其添加一些CSS样式。

#backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#backToTop:hover {
  background-color: #0056b3;
}

JavaScript实现

接下来，我们使用JavaScript实现回到顶部的功能。首先，我们需要监听用户的滚动事件，并根据页面的滚动位置来显示或隐藏回到顶部的按钮。

const backToTopButton = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    backToTopButton.style.display = 'block';
  } else {
    backToTopButton.style.display = 'none';
  }
});

上面的代码中，我们监听了scroll事件，当页面被滚动时，通过document.body.scrollTop和document.documentElement.scrollTop来获取页面的滚动位置，如果滚动位置超过100px，就显示回到顶部的按钮，否则隐藏按钮。

接下来，我们需要让页面在点击回到顶部按钮后平滑地滚动到顶部。为了实现这个效果，我们可以使用requestAnimationFrame来实现动画效果。

backToTopButton.addEventListener('click', () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  function scrollToTop() {
    if (scrollTop > 0) {
      window.requestAnimationFrame(scrollToTop);
      window.scrollTo(0, scrollTop - scrollTop / 8);
    }
  }

  scrollToTop();
});

在上面的代码中，我们为回到顶部按钮添加了点击事件监听器，当用户点击按钮时，获取当前页面的滚动位置scrollTop，然后通过requestAnimationFrame函数实现平滑滚动效果。每一帧滚动的距离为当前滚动位置的八分之一，通过不断调用scrollToTop函数来实现平滑滚动。

完整代码

下面是完整的HTML代码，包含了HTML、CSS和JavaScript的实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回到顶部</title>
<style>
#backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#backToTop:hover {
  background-color: #0056b3;
}
</style>
</head>
<body>
<button id="backToTop">回到顶部</button>
<script>
const backToTopButton = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    backToTopButton.style.display = 'block';
  } else {
    backToTopButton.style.display = 'none';
  }
});

backToTopButton.addEventListener('click', () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  function scrollToTop() {
    if (scrollTop > 0) {
      window.requestAnimationFrame(scrollToTop);
      window.scrollTo(0, scrollTop - scrollTop / 8);
    }
  }

  scrollToTop();
});
</script>
</body>
</html>