今天切一个专题页,页面比较长,想在右下角加一个返回头部的按钮。

一开始模仿w3cplus.com用了普通的锚点定位,代码如下:

   
   
   
   
  1. <div id="goToTop"> 
  2. <a title="回到顶部" href="#">TOPa> 
  3. div> 
   
   
   
   
  1. #goToTop { 
  2.     bottom: 5px
  3.     positionfixed
  4.     right: 5px
  5.     z-index9000

发现在ie6底下,居然错位,跑到左下角去了,心想,应该不会呀,这个网站都是这样搞滴,于是用ie打开,崇拜已久的w3cplus网站,它的网站居然没有考虑到ie6,用的都是新技术。哎,没办法,只能自己来了。

···插曲:以前在公司只要测IE6,7,8,9,ff,谷歌,现在做国内站,除了这些主流的,还得测,360,搜狗,遨游,safari,苹果。。天哪。兼容性问题,像360这样变态的浏览器,似IE内核又不是IE内核,头疼哪。。

回到正题。。

于是,朋友建议用了jquery,毕竟用ie hack定位,不太好,其实我目前还不是很喜欢js,毕竟不是自己写的代码,都是调用的,如果遇到问题,解决不了,那岂不是很糗,于是一直在恶补js,那本厚厚的js权威指南,一番就犯困,太概念性了,还是得实践实践在实践,我相信几个月之后会有突破的。

一开始一直无效果,原来是js加载顺序的问题,ohmygod,超想屎的。现在ok了,ie6下也行,明天去看看那些国内其他浏览器的效果。

方法如下:

1,调用jquery的官方类库。。传说中jquery-1.3.1.js这个最好用,我个人不喜欢过时的东西。。

2,调用一个别人写的gototop的js。。(谁来解释一下)

   
   
   
   
  1. jQuery.fn.floatdiv=function(location){ 
  2.     var isIE6=false
  3.     var Sys={}; 
  4.     var ua=navigator.userAgent.toLowerCase(); 
  5.     var s; 
  6.     (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:0; 
  7.     if(Sys.ie&&Sys.ie=="6.0"){isIE6=true;} 
  8.     var windowWidth,windowHeight; 
  9.     if(self.innerHeight){ 
  10.         windowWidth=self.innerWidth; 
  11.         windowHeight=self.innerHeight; 
  12.     } 
  13.     else if(document.documentElement&&document.documentElement.clientHeight){ 
  14.         windowWidth=document.documentElement.clientWidth; 
  15.         windowHeight=document.documentElement.clientHeight; 
  16.     }else if(document.body){ 
  17.         windowWidth=document.body.clientWidth; 
  18.         windowHeight=document.body.clientHeight; 
  19.     } 
  20.     return this.each(function(){ 
  21.         var loc; 
  22.         var wrap=$("
    "
    ); 
  23.         var top=-1; 
  24.         if(location==undefined||location.constructor==String){ 
  25.             switch(location){ 
  26.                 case("rightbottom"): 
  27.                     loc={right:"0px",bottom:"0px"}; 
  28.                     break
  29.                 case("leftbottom"): 
  30.                     loc={left:"0px",bottom:"0px"}; 
  31.                     break
  32.                 case("lefttop"): 
  33.                     loc={left:"0px",top:"0px"}; 
  34.                     top=0; 
  35.                     break
  36.                 case("righttop"): 
  37.                     loc={right:"0px",top:"0px"}; 
  38.                     top=0; 
  39.                     break
  40.                 case("middletop"): 
  41.                     loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"}; 
  42.                     top=0; 
  43.                     break
  44.                 case("middlebottom"): 
  45.                     loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"}; 
  46.                     break
  47.                 case("leftmiddle"): 
  48.                     loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"}; 
  49.                     top=windowHeight/2-$(this).height()/2; 
  50.                     break
  51.                 case("rightmiddle"): 
  52.                     loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"}; 
  53.                     top=windowHeight/2-$(this).height()/2; 
  54.                     break
  55.                 case("middle"): 
  56.                     var l=0; 
  57.                     var t=0; 
  58.                     l=windowWidth/2-$(this).width()/2; 
  59.                     t=windowHeight/2-$(this).height()/2; 
  60.                     top=t; 
  61.                     loc={left:l+"px",top:t+"px"}; 
  62.                     break
  63.                 default
  64.                     location="rightbottom"
  65.                     loc={right:"0px",bottom:"0px"}; 
  66.                     break
  67.             } 
  68.         }else
  69.             loc=location; 
  70.             var str=loc.top; 
  71.             if(typeof(str)!='undefined'){ 
  72.                 str=str.replace("px","");top=str; 
  73.             } 
  74.         } 
  75.         if(isIE6){ 
  76.             if(top>=0){ 
  77.                 wrap=$("
"); 
  •             } 
  •             else
  •                 wrap=$("