返回顶部效果（兼容IE6）

最近在写一个首页返回顶部的效果，因为IE6不兼容position:fixed的原因，一直找不到好的解决办法。在Google了一下，有了点眉目，加上一点自己的开发，总算误打误撞的把问题解决了。

最近也在学jquery，就顺便记录一下了。

HTML

 

1 < div class ="scroll" ></ div >
2   < script type ="text/javascript" src ="../skins/css/jQuery.js" charset ="UTF-8" ></ script >
3   < script type ="text/javascript" src ="../skins/css/top.js" charset ="UTF-8" ></ script >

 

 

CSS

1 .scroll {

  background : url(../image/scroll.gif) no-repeat center top transparent ;

  bottom : 100px ;

  cursor : pointer ;

  height : 67px ;

  width : 18px ;

  position : fixed ;

  _position : absolute ; /*兼容IE6*/

  _top : expression(eval(document.documentElement.scrollTop)+700) ; 

/*700为图片距离顶部的设定距离，可以修改。不加700则图片紧贴在顶部滚动*/

  }
2 html { _text-overflow : ellipsis ; } /*解决IE6下图片抖动*/

top.js

 

1 $(document).ready( function (){
2 var show_delay;
3 var scroll_left = parseInt((document.body.offsetWidth - 960 ) / 2)+961; //960为页面宽度
4   $( " .scroll " ).click( function (){
5 document.documentElement.scrollTop = 0 ;
6 document.body.scrollTop = 0 ;
7 });
8 $(window).resize( function (){
9 scroll_left = parseInt((document.body.offsetWidth - 960 ) / 2)+961;
10   $( " .scroll " ).css( " left " ,scroll_left);
11 });
12 reshow(scroll_left,show_delay);
13 });
14   function reshow(marign_l,show_d) {
15 $( " .scroll " ).css( " left " ,marign_l);
16   if ((document.documentElement.scrollTop + document.body.scrollTop) != 0 )
17 {
18 $( " .scroll " ).css( " display " , " block " );
19 }
20 else
21 {
22 $( " .scroll " ).css( " display " , " none " );}
23 if (show_d) window.clearTimeout(show_d);
24 show_d = setTimeout( " reshow() " , 500 );
25 }

 

最后不要忘记了jQuery.js文件哦！

 

再次，感谢各位前辈们的分享，我才能搞定……

转载于:https://www.cnblogs.com/jmkl008/archive/2011/01/16/1936808.html