点击按钮回到顶部

获取滚动条到顶部的距离

var sHeight = document.body.scrollTop;

var sWidth = document.body.scrollLeft;

谷歌支持 火狐IE不支持 

 

var sHeight = window.pageYOffset;

var sWidth = window.pagexOffset;

谷歌 火狐支持 IE不支持

 

var sHeight = document.documentElement.scrollTop;

火狐 IE支持 谷歌不支持

 

兼容做法：var sHeight = document.body.scrollTop || document.documentElement.scrollTop;

 

css

<style type="text/css">
　　#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:block; background:url(images/top_bg.png) no-repeat left top;}
　　#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}
　　.bg {width:1190px; margin:0 auto;}
　　.testdiv{width:2000px;height:2787px;background-color: #ccc;margin:0 auto;}
</style>

 

html

<a href="" id="btn" title="回到顶部"></a>　　

这样也有回到顶部的效果

 

以上可以马上回到顶部，但我们可以给它点时间慢慢回到顶部，甚至越来越快的速度回到顶部

jquery 实现方式 5秒的时间内回到顶部

$(function(){
    $('#btn').click(function(){
	    $('body,html').animate({scrollTop:0},5000);
			});
});

　　

javascript 用定时器控制每30毫秒距离减去50

window.onload = function(){			
	var btn = document.getElementById('btn');		
	var timer = null;
	btn.onclick=function(){
		timer = setInterval(function(){
			var sHeight = document.body.scrollTop || document.documentElement.scrollTop;
			document.documentElement.scrollTop = document.body.scrollTop -= 50;
			if(sHeight==0){
				clearInterval(timer);
			}
		},30);			
	}
}

　　

 定义一个渐变的速度，让滚动平滑些

window.onload = function(){            
    var btn = document.getElementById('btn');        
    var timer = null;
    btn.onclick=function(){
        timer = setInterval(function(){
            var sHeight = document.body.scrollTop || document.documentElement.scrollTop;
            var ispeed = Math.floor(-sHeight / 5); 
            document.documentElement.scrollTop = document.body.scrollTop = sHeight+ispeed;
            console.log(sHeight-ispeed);
            if(sHeight==0){
                clearInterval(timer);
            }
        },30);            
    }
}

　　

 

1.滚动条返回顶部的过程中用户可以拖动滚动条阻止返回 2.当超过可视区域高度时才出现“返回顶部”按钮

window.onload = function(){			
	var btn = document.getElementById('btn');		
	var timer = null;
	var iscroll = false;
	//获取可视区域的高度
	var cHeight = document.documentElement.clientHeight;
	//滚动条活动期间用户可以拖动滚轮
	window.onscroll =function(){
		var sHeight = document.body.scrollTop || document.documentElement.scrollTop;
		//超过可视区域告诉时显示返回顶部按钮
		if(sHeight>=cHeight){
			btn.style.display="block";
		}else{
			btn.style.display="none";
		}
		if(!iscroll){
			clearInterval(timer);
		}
		iscroll = false;
	}
	btn.onclick=function(){
		timer = setInterval(function(){
			var sHeight = document.body.scrollTop || document.documentElement.scrollTop;
			var ispeed = Math.ceil(sHeight / 5);  //创建速度变量
			document.documentElement.scrollTop = document.body.scrollTop = sHeight-ispeed;
			console.log(sHeight-ispeed);
			iscroll = true;
			if(sHeight==0){
				clearInterval(timer);
			}
		},30);			
	}
}