js实现回到顶部操作
2024-08-28 04:01:50
<a href="javascript:;" id="btn" title="回到顶部"></a>
样式:
#btn {width:40px; height:40px; position:fixed; right:25px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}
JS代码如下:
window.onload = function(){
var obtn = document.getElementById('btn'); //获取回到顶部按钮的ID
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 speed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
isTop =true; //用于阻止滚动事件清除定时器
if(osTop == 0){
clearInterval(timer);
}
},30);
}
}
最新文章
- ie8的兼容
- ASP.NET之Cookie(坑爹的Response.Cookies.Remove)(转)
- Java-继承,多态练习0922-03
- Windows XP/Windows 7/Windows 8/Windows 10系统封装的另类教程和思路
- 高性能JavaScript笔记一(加载和执行、数据访问、DOM编程)
- 多次快速点击相同button导致重复响应的问题
- s3c2440 mpll
- c# 使用GetOleDbSchemaTable获取access数据库结构
- unix shell-01 file
- Sublime Text 3 入门(插件控制台安装)
- 【转】 当程序崩溃的时候怎么办 Part-2
- 开源Pull_To_Refresh控件使用
- php中foreach()函数与Array数组经典案例讲解
- DJANGO中获取登陆用名及别名
- gtest官方文档浅析
- Websense一面、二面及Offer
- 201521123063 《Java程序设计》 第14周学习总结
- Memcached的简介和使用
- PHP开发编码规范
- go map的使用