JS实现页面回到顶部效果
2024-08-23 15:47:55
【代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>home</title>
</head>
<style>
*{
padding:0;
margin:0;
}
.box{
width:1190px; /*只有设置了宽度才能设置居中效果*/
margin:0 auto; /*设置居中*/
}
#btn{
display: none; /*按钮默认不显示*/
width:40px;
height:40px;
position:fixed; /*设置为固定定位*/
left:50%;
margin-left:610px;
bottom: 30px;
background:url("btn.png") no-repeat 0 0; /*通过sprite来设置背景*/
}
#btn:hover{
background:url("btn.png") no-repeat 0 -39px;
}
</style>
<body>
<div class="box">
<img src="img1.jpg" alt="">
</div>
<a id="btn" href="javascript:;"></a>
</body> <script>
// 当页面加载完成后执行
window.onload = function(){
var obtn = document.getElementById("btn");
var clientHeight = document.documentElement.clientHeight; //获取用户页面可视窗口的高度
var timer = null;
var isTop = true; //滚动条滚动时触发
window.onscroll = function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条当前位置距离顶部的距离 if(osTop >= clientHeight){ //当页面进入第二屏时显示按钮
obtn.style.display = "block";
}else{
obtn.style.display = "none";
} if(!isTop){ //若滚动条未到达顶部则继续执行定时器
clearInterval(timer);
}
isTop = false;
} obtn.onclick = function(){
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop/6); //使向上滚动呈现渐变效果
document.documentElement.scrollTop = document.body.scrollTop = (osTop+ispeed);
isTop = true; if(soTop == 0){ //如果滚动条已经到达浏览器顶部则暂定滚动
clearInterval(timer);
}
},30)
}
}
</script>
</html>
最新文章
- Android版本与api Level
- centos 6 SSH配置Google Authentication 验证
- 总结一下安装linux系统经验-版本选择-安装ubuntu
- js获取当前页面信息
- 三元组表压缩存储稀疏矩阵实现稀疏矩阵的快速转置(Java语言描述)
- linux日志处理logrotate使用
- Lombok(1.14.8) - @Log
- .NET技能分析
- Delphi ComboBox的属性和事件、及几个鼠标事件的触发
- <;a>;标签的href属性
- sql获取第n条数据
- AttributeError at /home/home/ Exception Type: AttributeError at /home/home/
- —软测试—(5)计算机系统CPU组成
- 实战 ASP.NET MVC Web API
- HDU1217:Arbitrage(SPFA)
- Python web(Django)连接Sql server
- Angular2 ng2-smart-table
- jQuery与JS中的map()方法使用
- CentOS 6.9 NFS安装和配置
- 从Tomcat的处理web请求分析Java的内存模型