返回顶部_demo

时间：2011-05-10 来源：大G

平时玩着新浪微博时，会发现右下角的“返回顶部”按钮挺好用的，实现这样的功能非常简单，今天趁着有空，也模仿着做了一个demo，效果见页面右下角。

由于原理相当简单，也没必要详细说明，主要是当滚动条拉下时，出现“返回顶部”按钮，点击就会迅速把页面往上滚。

其中最难搞的却是样式的设置，由于ie6以下版本不支持position:fixed，必须通过ie才支持的CSS expression进行绝对定位来模仿固定定位。

跨浏览器的固定定位样式,其中”_”符号只有 IE6 才能识别:

1position:fixed;
2bottom:50px;
3right:10px;
4_position:absolute;
5_bottom:auto;
6_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight-50));

这样做还不能使固定定位在ie6下平滑滚动，为文档添加空白图片竟然能神奇的解决，ie6实在是怪胎。

1 *html{
2 background:url(null);
3  }

css:

View Code

 1 *html{
 2 background:url(null);
 3  }
 4 .disable{
 5 display:none;
 6  }
 7 .scrolltop{
 8 font-size:16px;
 9 width:16px;
10 background:#000;
11 color:#fff;
12 cursor:pointer;
13 position:fixed;
14 bottom:50px;
15 right:10px;
16 _position:absolute;
17 _bottom:auto;
18 _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight-50));
19 padding:5px 2px;
20 opacity:0.6;
21 filter:alpha(opacity=60);
22  }

js:

View Code

 1 function scrollTop(){
 2     dom=createDiv("返回顶部");
 3     setCSS("disable");
 4     dom.onclick=scrollAction;
 5     window.onscroll=scrollEvent;
 6     
 7     function createDiv(val){
 8         var tem=document.createElement("div");
 9         tem.innerHTML=val;
10         document.body.appendChild(tem);
11         return tem;
12     }
13     function setCSS(val){
14         dom.className=val;
15     }
16     function scrollEvent(){
17         document.documentElement.scrollTop?setCSS("scrolltop"):setCSS("disable");
18     }
19     function scrollAction(){
20         var html=document.documentElement,
21             step=Math.ceil(html.scrollTop/2);
22          html.scrollTop-=step;
23         if(html.scrollTop!==0){
24         setTimeout(arguments.callee,40);
25         }
26     }
27 }
28 scrollTop();