动态效果要求:
点击按钮之后可以由快到慢地回到顶部,处于顶部位置时按钮消失,按钮位于页面的右下方
实现原理:
设置对返回顶部按钮的单机响应函数
在此函数内部定一个返回顶部计时器 returnTop
在 returnTop
内部设置一个变量 top
储存滚动条距离顶部的位置
在 returnTop
内部设置一个变量 v
储存一个数值,该数值为 -top/5
再令 document.documentElement.scrollTop
的数值为 ( top + v )
然后对 returnTop
定时器的执行间隔为30ms
如此每经过30ms,document.documentElement.scrollTop
的数值就会发生改变
此改变的值与 top
相关,top越大v越大,top越小v越小,从而达到实现点击按钮之后可以由快到慢地回到顶部
在 document.documentElement.scrollTop == 0
的时候设置清除计时器
代码展示:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: auto;
height: 3000px;
background-image: linear-gradient(rgb(201, 200, 200),rgb(57, 56, 56));
text-align: center;
position: relative;
}
#btn{
width: 65px;
height: 65px;
text-align: center;
line-height: 65px;
color: white;
border: 1px solid black;
background-color: gray;
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<h1>TOP</h1>
<button id="btn">返回顶部</button>
<script>
window.onload = function(){
//获取按钮
var btn = document.getElementById("btn")
//设置按钮点击后返回顶部
btn.onclick = function(){
//设置计时器
var returnTop = setInterval(function(){
//设置返回顶部距离
var top = document.documentElement.scrollTop
//设置速度差距
var v = Math.floor(-top/5)
document.documentElement.scrollTop = top + v
//清除计时器
if(top == 0){
clearInterval(returnTop)
}
},30)
}
//调用是否隐藏按钮函数
topGap()
//设置当页面滚轮发生滚动时候的响应事件
document.onscroll = function(){
//调用是否隐藏按钮函数
topGap()
}
}
//设置是否隐藏按钮函数,判断scrollTop的数值,如果为零隐藏返回顶部按钮
function topGap(){
if(document.documentElement.scrollTop == 0){
btn.style.display = "none"
}else{
btn.style.display = "block"
}
}
</script>
</body>
</html>
效果展示:
返回顶部