一个简单的弹性返回顶部JS代码实现介绍

介绍

在网页开发中，经常需要在页面底部添加一个 “返回顶部” 按钮。为了让用户体验更好，我们可以使用JS实现一个弹性返回顶部的效果。本篇文档将详细介绍如何实现该功能。

实现过程

1. HTML

首先，在HTML中添加两个元素，一个是返回顶部的按钮，另一个是页面底部占位元素，用于模拟初始页面的滚动高度，如下所示：

<button id="backToTopBtn">返回顶部</button>
<div style="height: 3000px;"></div>

2. CSS

为了让按钮悬浮在页面底部，并保持可见性，可以使用CSS实现如下样式：

#backToTopBtn {
  display: none; /* 先隐藏按钮 */
  position: fixed; /* 悬浮在页面底部 */
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity 0.2s; /* 按钮渐变出现 */
}

#backToTopBtn:hover {
  opacity: 0.7; /* 鼠标悬浮时，按钮透明度变为0.7 */
}

3. JS

接下来，使用JS实现弹性返回顶部的功能。具体步骤如下：

3.1 获取页面滚动高度

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

获取document.documentElement.scrollTop 和 document.body.scrollTop 中的较大值作为scrollTop，以兼容不同浏览器。

3.2 判断是否显示返回顶部按钮

// 当页面滚动高度scrollTop大于等于100时，显示按钮
if (scrollTop >= 100) {
  backToTopBtn.style.display = "block";
} else {
  backToTopBtn.style.display = "none";
}

3.3 给按钮添加点击事件

backToTopBtn.onclick = function () {
  // 设置定时器，实现缓慢返回顶部的效果
  var timer = setInterval(function () {
    scrollTop = scrollTop - 50;
    if (scrollTop <= 0) {
      clearInterval(timer); /* 当scrollTop小于等于0时，清除定时器 */
    }
    window.scrollTo(0, scrollTop); /* 实现返回顶部的效果 */
  }, 16.7); /* 约60fps的刷新频率 */
};

3.4 实现弹性返回顶部

// 定义新的定时器
var timer = setInterval(function () {
  // 计算当前滚动高度与目标滚动高度之间的差值
  var step = (0 - scrollTop) / 10; 
  // 将差值向上或向下取整，避免动画过程中scroll高度出现小数
  step = step > 0 ? Math.ceil(step) : Math.floor(step); 
  scrollTop += step; // 更新scrollTop值
  if (scrollTop == 0) {
    clearInterval(timer); // 动画结束，清除定时器
  }
  window.scrollTo(0, scrollTop); // 实现弹性返回顶部的效果
}, 16.7); 

示例说明

示例1

当页面滚动高度大于等于100时，显示返回顶部按钮，鼠标悬浮时透明度变为0.7，并可以返回顶部。页面底部占位元素的高度为3000px。

详细代码戳这里：示例1代码

示例2

当页面滚动高度大于等于200时，显示返回顶部按钮，鼠标悬浮时透明度变为0.5，并可以弹性返回顶部。页面底部占位元素的高度为8000px。

详细代码戳这里：示例2代码

总结

以上就是一个简单的弹性返回顶部JS代码实现介绍。通过HTML、CSS和JS的协同作用，可以实现一个良好的用户体验效果。