用 JavaScript 实现网站返回初始/顶部特效

2023-12-14 14:16:29

用 JavaScript 实现网站返回初始/顶部特效

引言

网站返回初始/顶部特效是一个方便实用的功能，可以让用户快速返回页面的顶部，提升用户浏览体验。本文将详细介绍如何使用 JavaScript 实现这一特效。

实现步骤

创建 HTML 按钮：

<button id="back-to-top-btn">返回顶部</button>

设置 CSS 样式：

#back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  display: none;
}

编写 JavaScript 代码：

// 获取返回顶部按钮
const backToTopBtn = document.getElementById('back-to-top-btn');

// 添加事件监听器
window.addEventListener('scroll', () => {
  // 判断滚动高度是否大于 100px
  if (window.scrollY > 100) {
    // 显示返回顶部按钮
    backToTopBtn.style.display = 'block';
  } else {
    // 隐藏返回顶部按钮
    backToTopBtn.style.display = 'none';
  }
});

// 点击返回顶部按钮
backToTopBtn.addEventListener('click', () => {
  // 平滑滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});