【返回顶部】 功能

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);
	 })
   2. 我们知道 如果 指定  <a> 标签的 href 属性为 “#” 的话,也可以实现返回顶部。所以 用一个 <a> 标签 签入【返回顶部】,然后设置 href = “#” 也可以实现。(360首页就是   这么干的)

6. 完整的源代码, 可以到此下载

相关文章
相关标签/搜索