在几个月前，我就已经把这个功能实现了，之前这个效果是由 HTML、css、JavaScript 一块儿写的，并且当时留下了一个问题：如何禁止短时间内多次点击 div 滑块儿，防止出现页面出现闪动情况。
利用昨天晚上的一个多小时把这个重写了一下，并且把 HTML 和 css 都直接在 JavaScript 中进行表达。
使用方法
把 totop.js 直接用 script 标签引入 HTML 页面。
或者，直接把 totop.js 中的代码复制粘贴于浏览器控制端，即可在当前页面中看到效果。
源代码
我已经寄存在GitHub上面了， 点这里 。
(function(){
// 使用JavaScript为页面添加返回顶部滑块儿
vardiv =document.createElement("div");
div.id = "to-top";
div.style.cssText = ` display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
cursor: pointer;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 3px;
background: #666;
text-align: center;
font-size: 25px;
`;
// 为了方便，我这里直接使用HTML向上箭头的实体
div.innerHTML = "↑";
document.body.appendChild(div);
// 返回顶部 动画实现
// animationToTop() 默认有2个参数
// step 设置滚动函数中每次向上滚动的像素值，默认为 5像素
// delay 设置每次调用滚动函数的时间间隔，默认为 20ms
functionanimationToTop(step = 5, delay = 20){
varintervalID;
intervalID = window.setInterval(roll, delay);// 计时器
varlength =window.scrollY;
// 向上滚动函数
functionroll(){
window.scrollTo(0, length -= (step++));
if(length <=0) {
clearInterval(intervalID);
vartop =document.getElementById("to-top");
top.style.pointerEvents = "auto";
top = null;
}
}
}
// 添加点击事件
vartop =document.getElementById("to-top");
top.onclick = function(){
vartop =document.getElementById("to-top");
top.style.pointerEvents = "none";
top = null;
animationToTop();
};
// 在合适的时间 显示 返回顶部按钮
document.addEventListener("scroll",function(){
vartop =document.getElementById("to-top");
if(window.scrollY <document.body.clientHeight /4) {
top.style.display = "none";
} else{
top.style.display = "block";
}
top = null;
});
})();