为博客添加“滑到顶部”按钮
顶部自动隐藏，鼠标悬停切换图片，过渡动画渐变。网上找了很多资料，综合了一下，最终实现了效果。
💷演示效果
过渡动画渐变切换图片
“滑到顶端”演示
📙示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
<style type="text/css">
.box {
background: url('https://www.imokey.cn/sicnu/img/icon.png') center center no-repeat;
background-size: contain;
position:fixed;
right:10px;
bottom:10px;
height:40px;
width: 40px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.box:hover {
position:fixed;
right:10px;
bottom:10px;
height:40px;
width: 40px;
background-image: url('https://www.imokey.cn/sicnu/img/totop.png');
}
</style>
</head>
<body style="height:2000px;">
<div id="box" class="box"></div>
<script>
window.onload = function(){
document.getElementById("box").style.display = "none";
}
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
document.getElementById("box").style.display = "block";
}
else {
document.getElementById("box").style.display = "none";
}
}
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
var startTime = +new Date();
var b = document.body.scrollTop || document.documentElement.scrollTop;
var d = 500;
var c = b;
timer = requestAnimationFrame(function func(){
var t = d - Math.max(0,startTime - (+new Date()) + d);
document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
timer = requestAnimationFrame(func);
if(t == d){
cancelAnimationFrame(timer);
}
});
}
</script>
</body>
</html>
✅详细阐释
1️⃣HTML部分
<div id="box" class="box"></div>
用一个div标签来放置“滑到顶端”按钮，id用于js定位，class用于css定位
2️⃣CSS部分
.box {
background: url('https://www.imokey.cn/sicnu/img/icon.png') center center no-repeat;
background-size: contain;
position:fixed;
right:10px;
bottom:10px;
height:40px;
width: 40px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}//鼠标未悬停至图片上方的样式
.box:hover {
position:fixed;
right:10px;
bottom:10px;
height:40px;
width: 40px;
background-image: url('https://www.imokey.cn/sicnu/img/totop.png');
}//鼠标悬停至图片上方的样式
3️⃣ javascript部分
这部分主要是为了实现网页初始加载完成后隐藏按钮，或滑到顶部后隐藏，滑到下面出现
window.onload = function(){
document.getElementById("box").style.display = "none";
}//网页初始加载完成后隐藏按钮
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
document.getElementById("box").style.display = "block";
} //滑到下面出现
else {
document.getElementById("box").style.display = "none";
} //滑到顶部后隐藏
}
这部分实现按时间滑到页面顶部，这里设置的是500ms
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
//获取当前毫秒数
var startTime = +new Date();
//获取当前页面的滚动高度
var b = document.body.scrollTop || document.documentElement.scrollTop;
var d = 500;//过渡时间，可自行调整
var c = b;
timer = requestAnimationFrame(function func(){
var t = d - Math.max(0,startTime - (+new Date()) + d);
document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
timer = requestAnimationFrame(func);
if(t == d){
cancelAnimationFrame(timer);
}
});
}