2. 【返回顶部】的滚动
【返回顶部】 的位置应该是固定的,例如在右下角。实现方法:
1. 使用 相对定位,根据浏览器滚动条的 位置 设置 【返回顶部】的位置。
这个做法很简单, 通过动态改变位置即可。但由于使用了相对定位,每次都是移动位置实现的,所以如果操作快一点,就会出现闪烁。所以 推荐使用 方法 2。
2. 使用绝对定位,通过判断距离来显示和隐藏【返回顶部】,这样就可以 避免闪烁。但会有一些 浏览器兼容的问题,下面就来分析问题和提供解决方法。
3. 使用 html + css 设置【返回顶部】在右下角
- <!--测试-->
- <div id="toTop">
- <em>返回顶部</em>
- </div>
<!--测试-->
<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;
- }
#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">
<!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;
- }
/*以下 设置是为了兼容 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");
- }
- })
$(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);
- })
//点击【返回顶部】
$("#toTop").click(function(){
$("#toTop").css("display","none");
$(document).scrollTop(0);
})
2. 我们知道 如果 指定 <a> 标签的 href 属性为 “#” 的话,也可以实现返回顶部。所以 用一个 <a> 标签 签入【返回顶部】,然后设置 href = “#” 也可以实现