html文件代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="box">
<img src="bg.png">
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>
css文件代码：
.box{
width: 999px;
margin: 0 auto;
}
#btn{
width: 40px;
height: 40px;
display: none; /*默认不显示回到顶部图标*/
position: fixed;
left: 50%;
margin-left: 470px;
bottom: 30px;
background:url(back_top.png) no-repeat left top;/*背景图的位置是从元素的左上方开始显示*/
}
#btn:hover{
background:url(back_top.png) no-repeat left -40px; /*鼠标放到回到顶部链接时改变的样式
}
回到顶端图标：
JS文件代码：
//页面渲染完触发
window.onload = function(){
var obtn = document.getElementById(‘btn‘);
var clientHeight = document.documentElement.clientHeight;//获取内容可视区域高度（视口高度）
var timer = null;
//滚动轴滚动时触发
window.onscroll = function(){
var osTop = document.documentElement.scrollTop||document.body.scrollTop;//获取滚动轴垂直偏移，后半部分为兼容谷歌浏览器
//当滚动轴垂直偏移大于等于视口高度时显示回到顶端图标
if (osTop >= clientHeight) {
obtn.style.display = ‘block‘;
}else{
obtn.style.display = ‘none‘;
};
}
obtn.onclick = function(){ //点击事件
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop||document.body.scrollTop;//兼容谷歌
var ispeed = Math.floor(-osTop / 5); //若不是整数，向下舍入
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;//回到顶端的速度不断减缓
if (osTop == 0) {
clearInterval(timer); //回到顶端时清除计时器
};
},30);
}
}
效果截图：
1、不显示回到顶端图标
2、当滚动轴滚动垂直偏移大于视口高度出现回到顶端图标
3、鼠标移入图标改变，点击后回到顶部
时间： 2024-08-06 23:37:24