网页添加【回到顶部】按钮

博客并没有内置回到顶部按钮功能，所以自己搞一个简易的。

纯js实现，通用任何网页

[!NOTE] 获取页面离顶部的距离，用顶部距离除以x，计算每次滚动距离，让滚动速度由快到慢。interval计时器循环。 Math.ceil() “向上取整”，小数部分直接舍去，并向正数部分进1 宽度限制在1000以上，给PC用，~~手机它也用不着啊~~

// 创建按钮
var btn = document.createElement("button");
btn.id = "backToTopBtn";

// SVG图标作为按钮内容
btn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V5M5 12l7-7 7 7" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>';

// 按钮CSS
btn.style.display = "none"; // 默认隐藏
btn.style.position = "fixed"; // 固定在页面
btn.style.bottom = "80px"; // 距离底部80像素
btn.style.right = "20px"; // 距离右侧20像素
btn.style.zIndex = "99"; // 确保按钮在最前
btn.style.border = "2px solid black"; // 黑色边框
btn.style.backgroundColor = "white"; // 按钮白色背景
btn.style.borderRadius = "10px"; // 按钮圆角
btn.style.cursor = "pointer"; // 鼠标悬停时光标变为指针
btn.style.padding = "7px"; // 按钮内边距
btn.style.outline = "none"; // 无外边框
btn.style.transition = "background-color 0.5s, color 0.5s"; // 渐变效果

// SVG样式
var svg = btn.querySelector("svg");
svg.style.transition = "stroke 0.5s";

// 悬停时反转颜色
btn.onmouseover = function() {
  btn.style.backgroundColor = "black";
  svg.querySelector("path").style.stroke = "white";
};
btn.onmouseout = function() {
  btn.style.backgroundColor = "white";
  svg.querySelector("path").style.stroke = "black";
};

// 回到顶
btn.addEventListener("click", clickHandler);
function clickHandler(e) {
    btn.style.backgroundColor = "black";
    svg.querySelector("path").style.stroke = "white";
    let timer = setInterval(function () {
        var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容
        if (distanceY == 0){
            clearInterval(timer);
            btn.style.backgroundColor = "white";
            svg.querySelector("path").style.stroke = "black";
            return;
        } 
        var speed = Math.ceil(distanceY/16) + 5;//speed先快后满
        document.documentElement.scrollTop=distanceY-speed;
    }, 10);
}

// 将按钮添加到body
document.body.appendChild(btn);

function scrollFunction() {
  if (window.innerWidth < 1000) {
    btn.style.display = "none";
  } else if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    btn.style.display = "block";
  } else {
    btn.style.display = "none";
  }
}

// 滚动时检查是否显示按钮
window.onscroll = function() {
  scrollFunction();
};

// 初始检查窗口宽度
if (window.innerWidth >= 1000) {
  scrollFunction();
}

// 当窗口大小改变时检查窗口宽度
window.onresize = function() {
  if (window.innerWidth < 1000) {
    btn.style.display = "none";
  } else {
    scrollFunction();
  }
};

效果图

Gmeek-html<img src="https://img.liyifan.xyz/file/2c0aba70ff4a96a5b06cd.png" data-src="https://img.liyifan.xyz/file/4e1ae2ae8b35ee8050bc6.gif" alt="img" width="100%">

Gmeek-html<img src="https://img.liyifan.xyz/file/2c0aba70ff4a96a5b06cd.png" data-src="https://img.liyifan.xyz/file/f1065b9e6a86af4448bce.jpg" alt="img" width="100%">

liyifanniubi / liyifanniubi.github.io

网页添加【回到顶部】按钮 #6

效果图