滚动到顶部的简单JavaScript实现-优快云博客

[color=blue]网上各种各样的眼花缭乱，索性自己写一个，这只是个简单的例子，
点击返回头部瞬间跳到顶部，你也可以写计时器每次向上滚动多少，实现有动画效果的
返回顶部[/color]

[size=medium][color=red][b]兼容性也不错，主流浏览器都是可用的[/b][/color][/size]

[color=blue][size=medium]先上图：[/size][/color]
[img]http://dl.iteye.com/upload/picture/pic/132249/8f5a326e-e2ba-3478-b40f-4e3bb1d19580.gif[/img]

[size=medium][color=blue]JS部分[/color][/size]


//返回顶部
	var scrolltotop = {
		scrollevent:function(){
			try{
				var OsObject = this.whichbrowser();
				var show_jq_k = document.body.scrollTop;
				var show_jq_g = document.body.scrollLeft;
				var cuizhi = document.documentElement.scrollTop;
			}catch(e){}
			//判断浏览器类型 
			if(OsObject=="Firefox" || OsObject=="MSIE"){
				//隐藏返回头部按钮
				if(cuizhi < 150){
					document.getElementById("totop_btn").style.display = "none";
				}
				//显示返回头部按钮
				if(cuizhi > 150){
					document.getElementById("totop_btn").style.display = "inline";
				}
			}else{
				console.log(show_jq_k)
				//隐藏返回头部按钮
				if(show_jq_k < 150){
					document.getElementById("totop_btn").style.display = "none";
				}
				//显示返回头部按钮
				if(show_jq_k > 150){
					document.getElementById("totop_btn").style.display = "inline";
				}
			}
		},
		whichbrowser:function(){
			if(navigator.userAgent.indexOf("MSIE")>0) {
				OsObject = "MSIE";
				return OsObject;  
			}
			if(isChrome=navigator.userAgent.indexOf("Chrome")>0) {
				OsObject = "Chrome";
				return OsObject;  
			}			
			if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
				OsObject = "Firefox";
				return OsObject;
			}  
			if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
				OsObject = "Safari";
				return OsObject;
			}   
			if(isCamino=navigator.userAgent.indexOf("Camino")>0){
				OsObject = "Camino";
				return OsObject;
			}  
			if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
				OsObject = "Gecko";
				return OsObject;
			}
		},
		scrolltop:function(){
			//window.scrollTo(0,0); 
			//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
			window.scrollBy(0,-100);
			//延时递归调用，模拟滚动向上效果
			scrolldelay = setTimeout('scrolltotop.scrolltop()',50);
			//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
			var sTop=document.documentElement.scrollTop+document.body.scrollTop;
			//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
			if(sTop==0) clearTimeout(scrolldelay);
		}
	}
	window.onscroll = function(){
		scrolltotop.scrollevent();
	}

[size=medium][color=blue]HTML部分[/color][/size]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>测试</title>
	<script type="text/javascript" src="scrolltotop.js"></script>
</head>
<body id="top">
	<div style="height:300px;width:100%;"></div>
	<div style="height:300px;width:100%;background-color:#dddddd;"></div>
	<div style="height:300px;width:100%;background-color:#ffffff;"></div>
	<div style="height:300px;width:100%;background-color:#00ff00;"></div>
	<div style="height:300px;width:100%;background-color:#ffddee;"></div>
	<div style="height:300px;width:100%;background-color:#eeff00;"></div>
	<div style="height:300px;width:100%;background-color:#ddeeff;"></div>
	<a id="totop_btn" href="javascript:;" onclick="scrolltotop.scrolltop()" target="_self" class="totop" 
		style="position:fixed;right:10px; bottom:10px;width:100px;height50px;line-height:50px;text-align:center;background-color: #ff0000;display:none;">
		返回顶部
	</a>
</body>	
</html>