首页 > 代码库 > JavaScript实现回到顶部
JavaScript实现回到顶部
HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面。
demo:
<a href="javascript:;" id="btn" title="回到顶部"></a>
其css代码为:
#btn{
display: none;
position: fixed;
left: 90%;
bottom: 40px;
height:60px;
width: 60px;
background: url(img/22.ico) no-repeat left top;
background-size:100% auto;
border: solid 1px red;
border-radius: 5px;
}
补充几句话:
window.onload = function(){ //获取相关 var mybtn = document.getElementById("btn"); var Time1 = null; var isTop = true; mybtn.onclick = function(){ //设置定时器 Time1 = setInterval(function(){ var osTop = document.body.scrollTop||document.documentElement.scrollTop; //ceil向上取整,floor向下取整 var speed = Math.ceil(osTop/2); //做一个变换速度的回到顶部效果 document.body.scrollTop = document.documentElement.scrollTop = osTop - speed; if(osTop <= 0){ //清除定时器 clearInterval(Time1); } isTop = true ; },100) } //页面滚动自动触发: window.onscroll = function(){ //获取页面可视区高度和滚动高度 var osTop = document.body.scrollTop||document.documentElement.scrollTop; //这两个获取滚动的方法可以兼容多种浏览器 var clientHeight = document.documentElement.clientHeight; //对回到顶部的隐藏和显示,在css中一开始可以设置为隐藏 if (osTop>clientHeight) { mybtn.style.display = "block" } else{ mybtn.style.display = "none" } if (!isTop) { clearInterval(Time1); } isTop = false; } }
另外补充:
1、各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;
2、获取scrollTop值
完美的获取scrollTop 赋值短语 :
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通过这句赋值就能在任何情况下获得scrollTop 值。
最后说明:
本人学习来自百度搜索,祝大家利用好网络搜索。
JavaScript实现回到顶部