js
//第一种方法
//(function pageScroll(){
// //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数)
// window.scrollBy(0,-1000);
// //延时递归调用,模拟滚动向上效果
// scrollDelay=setTimeout('pageScroll',200);
// //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值
// var sTop=document.documentElement.scrollTop+document.body.scrollTop;
// //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)
// if(sTop==0){
// clearTimeout('scrollDelay');
// }
//})()
//第二种方法
window.onload=function(){
var topbtn=document.getElementById('js_goTop');
var timer=null;
//滚动条滚动时触发
var isTop=true;
var clientHeight= document.documentElement.clientHeight;
window.onmousewheel=function(){
//获取滚动条的距离和顶部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop>=clientHeight){
topbtn.style.display='block';
}else{
topbtn.style.display='none';
}
if(!isTop){
clearInterval(timer);
}
isTop =false;
}
topbtn.onclick=function(){
//设置定时器
timer =setInterval(function(){
//获取滚动条的距离和顶部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollspeed = Math.floor(-osTop/9);
document.documentElement.scrollTop = document.body.scrollTop = osTop+scrollspeed;
isTop=true;
if(osTop===0){
clearInterval(timer);
}
},
20);
}
}
html
<a href="javascript:;" title="backTotop" class="backtop js_gotop" id="js_goTop"></a>
css
.backtop{
width: 40px;
height: 40px;
position: fixed;
right: 15px;
bottom: 30px;
background: url(pics/top_bg.png) no-repeat left top;
display: none;
}
.backtop:hover{
background: url(pics/top_bg.png) no-repeat left -40px;
}
网友评论