1. 引言：许多网站都有 【返回顶部】 这个功能，如 360、新浪微博 等等。在网站 内容较多的时候代替 滚动条，给用户更好的体验。

2. 【返回顶部】的滚动

  【返回顶部】 的位置应该是固定的，例如在右下角。实现方法：

  1. 使用 相对定位，根据浏览器滚动条的 位置 设置 【返回顶部】的位置。

 这个做法很简单， 通过动态改变位置即可。但由于使用了相对定位，每次都是移动位置实现的，所以如果操作快一点，就会出现闪烁。所以 推荐使用 方法 2。

  2. 使用绝对定位，通过判断距离来显示和隐藏【返回顶部】，这样就可以 避免闪烁。但会有一些 浏览器兼容的问题，下面就来分析问题和提供解决方法。

3. 使用 html + css 设置【返回顶部】在右下角


<!--测试-->
<div id="toTop">
<em>返回顶部</em>
</div>
#toTop { 
	width:14px;
	height:65px;
	position:fixed;	
	right:30px;
	bottom:50px;
	background:gray; 	 
	padding:5px;
	color:#fff; 
	font:12px Arial;
	cursor:pointer; 
	display:none;
}


通过这样设置，在 Chrome  FireFox  就可以实现了。IE8 里要引入： 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这样在 Chrome FireFox IE8+ 就都实现了。 但 IE8- 不支持 position:fixed 这个绝对定位，如果我们用IE6查看（使用IETester），就会发现 这个 div 还是在 左上角。（万恶的 IE6...不说了）

要解决这个问题，网上的方法，都有些太复杂有些无法实现，这里是一个比较好的做法。加入如下选择器：


/*以下 设置是为了兼容 IE8- */
* html #toTop{
	position:absolute; 
	right:30px;
}

* html body{
	height:100%;
	overflow-y:auto;
}

* html{
	overflow-x:auto; 
	overflow-y:hidden;
}


也就是显示的滚动条是 body 的。

这样就将 div 设置到右下角了。但这样还会出现一个新的问题。

4. scroll 事件

   通过上面的 做法，我们只要捕捉 window 的 scroll 事件，然后 根据判断距离 控制 display 为 none 或者 bloc即可。在 Chrome FireFox IE8+ 也都测试正常。但...... IE6 测试 又出现问题，滚动不会 动态 显示 和隐藏 div。

IE6里认为 滚动的是 body 的 scroll 事件，而不是 window 的。 所以如果 捕捉 body 的 scroll 事件是    可以实现的。这就要求要兼容 这两种情况...

  兼容的写法是：分开 判断 IE8- 还是其它浏览器。

   网上 有许多 判断 IE 浏览器版本的写法。根据实际情况，这里找了更简单的方法。看到 上面最后三个 css 是给 IE8-使用的，所以在 IE8- 里，overflow-y 为 hidden，而其它浏览器为 visible。

 * 貌似 IE7 没有 overflow-y 属性。因为 我的 IETester IE7 浏览器运行不了，所以没有测试。有需要可以测试一下，或者 写 js 判断浏览器的版本。   

如下：


$(function(){	    
    //兼容写法：根据 body 的 overflow-y 属性判断
    var top = $("body").css("overflow-y"); 		
    if(top == 'visible')
	 $(window).scroll(function(){
		 var ins = $(document).scrollTop();
		 goTop(ins);
	 });
	else
	 $("body").scroll(function(){
		 var ins = $("body").scrollTop();	
		 goTop(ins);
	 });	  

    function goTop(ins){			        
		if(ins > 30)		  
			$("#toTop").css("display","block");
		else
			$("#toTop").css("display","none");
	}
})


这样，一个右下角的 【返回顶部】就可以在各个浏览器显示了。

5. 点击 【返回顶部】   

    有两种实现的方法。

   1 是如这里使用的，使用 jQuery实现，代码很简单。如下：  


//点击【返回顶部】
	 $("#toTop").click(function(){
		 $("#toTop").css("display","none");
		 $(document).scrollTop(0);
	 })


360首页就是   这么干的）