弹性返回顶部js代码

// 获取返回顶部按钮元素
var backToTopBtn = document.getElementById("backToTop");

// 监听页面滚动事件
window.addEventListener("scroll", function() {
  // 如果页面滚动距离大于一定值，显示返回顶部按钮，否则隐藏
  if (window.pageYOffset > 100) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
});

// 给返回顶部按钮添加点击事件
backToTopBtn.addEventListener("click", function() {
  // 使用 requestAnimationFrame 实现平滑滚动效果
  var currentPosition = window.pageYOffset;
  var startTime = null;

  function scrollAnimation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var run = easeInOutQuad(timeElapsed, currentPosition, -currentPosition, 500);
    window.scrollTo(0, run);
    if (timeElapsed < 500) requestAnimationFrame(scrollAnimation);
  }

  // 缓动函数
  function easeInOutQuad(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t + b;
    t--;
    return (-c / 2) * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(scrollAnimation);
});