<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 回到顶部效果</title>
<style>
.box{
width: 1000px;
margin: 0 auto;
}
.btn{
position: fixed;
right: 30px;
bottom: 30px;
width: 40px;
height: 40px;
background-image: url('top_bg.png');
background-position: 0 0;
background-repeat: no-repeat;
display: none;
}
.btn:hover{
background-position: 0 -40px;
}
</style>
</head>
<body>
<div class="box">
<img src="demo.png" alt="">
</div>
<a href="javascript:;" class="btn" id="btn"></a>
<script>
/*
DOM操作
1.document.getElementById() 根据id获取标签元素
2.document.documentElement.scrollTop 滚动条的数值,可读写
事件运用
1.window.onload 页面加载完后触发
2.onclick 点击后触发
3.window.onscroll 滚动条滚动时触发
定时器
1.setInterval() 设置定时器,需要传2个参数
2.clearInterval() 关闭定时器,需要传1个参数
*/
window.onload = function(){
var obtn = document.getElementById('btn');
// 获取页面可视区的高度
var clientHeight = document.documentElement.clientHeight;
console.log(clientHeight);
var timer = null;
var isTop = true;
// 滚动条滚动时触发
window.onscroll = function(){
// 获取滚动条距离顶部的高度
// 兼容问题 IE || chrome
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log('gundongz');
if(osTop >= clientHeight){
obtn.style.display = 'block';
}else{
obtn.style.display = 'none';
}
if(!isTop){
clearInterval(timer);
}
isTop = false;
}
obtn.onclick = function(){
// 设置定时器
timer = setInterval(function(){
// 获取滚动条距离顶部的高度
// 兼容问题 IE || chrome
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(osTop);
var ispeed = Math.floor(-osTop / 10);
document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
isTop = true;
if(osTop == 0){
// 清除定时器
clearInterval(timer);
}
},30)
}
}
</script>
</body>
</html>
JavaScript 回到顶部效果
最新推荐文章于 2022-11-01 19:41:37 发布