Open liyifanniubi opened 3 months ago
博客并没有内置回到顶部按钮功能,所以自己搞一个简易的。
回到顶部
纯js实现,通用任何网页 [!NOTE] 获取页面离顶部的距离,用顶部距离除以x,计算每次滚动距离,让滚动速度由快到慢。interval计时器循环。 Math.ceil() “向上取整”, 小数部分直接舍去,并向正数部分进1 宽度限制在1000以上,给PC用,手机它也用不着啊
纯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%">
点赞,这个也可以做一个插件~~
博客并没有内置
回到顶部
按钮功能,所以自己搞一个简易的。效果图
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%">