https://yuang01.github.io/js/goTop.js

1document.addEventListener('DOMContentLoaded', function () {
2  const backBtn = document.querySelector('.goTop');
3  isShow();
4  // 判断是否显示返回顶部按钮
5  window.addEventListener('scroll', function () {
6    isShow();
7  });
8  function isShow() {
9    if (window.scrollY > 100) {
10      backBtn.style.display = 'block';
11      backBtn.style.transform = 'translateY(0)';
12    } else {
13      backBtn.style.transform = 'translateY(120px)';
14    }
15  }
16  // 返回顶部按钮点击事件
17  backBtn.addEventListener('click', function () {
18    scrollToTop(500); // 滚动到顶部，时长为500ms
19  });
20
21  // 滚动到顶部函数
22  function scrollToTop(duration) {
23    const startingY = window.scrollY;
24    const startTime = performance.now();
25
26    function easeInOutQuad(time, start, change, duration) {
27      time /= duration / 2;
28      if (time < 1) return change / 2 * time * time + start;
29      time--;
30      return -change / 2 * (time * (time - 2) - 1) + start;
31    }
32
33    function animate(currentTime) {
34      const elapsedTime = currentTime - startTime;
35      window.scrollTo(0, easeInOutQuad(elapsedTime, startingY, -startingY, duration));
36      if (elapsedTime < duration) {
37        requestAnimationFrame(animate);
38      }
39    }
40
41    requestAnimationFrame(animate);
42  }
43});