为了账号安全,请及时绑定邮箱和手机立即绑定

跳转至头部

标签:
JQuery

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

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

<div id="goToTop"> <a title="回到顶部" href="#">TOP</a> </div>
#goToTop {     bottom: 5px;     position: fixed;     right: 5px;     z-index: 9000; }

发现在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。。(谁来解释一下)

jQuery.fn.floatdiv=function(location){     var isIE6=false;     var Sys={};     var ua=navigator.userAgent.toLowerCase();     var s;     (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:0;     if(Sys.ie&&Sys.ie=="6.0"){isIE6=true;}     var windowWidth,windowHeight;     if(self.innerHeight){         windowWidth=self.innerWidth;         windowHeight=self.innerHeight;     }     else if(document.documentElement&&document.documentElement.clientHeight){         windowWidth=document.documentElement.clientWidth;         windowHeight=document.documentElement.clientHeight;     }else if(document.body){         windowWidth=document.body.clientWidth;         windowHeight=document.body.clientHeight;     }     return this.each(function(){         var loc;         var wrap=$("<div></div>");         var top=-1;         if(location==undefined||location.constructor==String){             switch(location){                 case("rightbottom"):                     loc={right:"0px",bottom:"0px"};                     break;                 case("leftbottom"):                     loc={left:"0px",bottom:"0px"};                     break;                 case("lefttop"):                     loc={left:"0px",top:"0px"};                     top=0;                     break;                 case("righttop"):                     loc={right:"0px",top:"0px"};                     top=0;                     break;                 case("middletop"):                     loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};                     top=0;                     break;                 case("middlebottom"):                     loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};                     break;                 case("leftmiddle"):                     loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};                     top=windowHeight/2-$(this).height()/2;                     break;                 case("rightmiddle"):                     loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};                     top=windowHeight/2-$(this).height()/2;                     break;                 case("middle"):                     var l=0;                     var t=0;                     l=windowWidth/2-$(this).width()/2;                     t=windowHeight/2-$(this).height()/2;                     top=t;                     loc={left:l+"px",top:t+"px"};                     break;                 default:                     location="rightbottom";                     loc={right:"0px",bottom:"0px"};                     break;             }         }else{             loc=location;             var str=loc.top;             if(typeof(str)!='undefined'){                 str=str.replace("px","");top=str;             }         }         if(isIE6){             if(top>=0){                 wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight /2-this.offsetHeight/2);\"></div>");             }             else{                 wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");             }         }         $("body").append(wrap);wrap.css(loc).css({position:"fixed",z_index:"999"});         if(isIE6){             wrap.css("position","absolute");             $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");         }         $(this).appendTo(wrap);     }); };

3,在html页面中引用

<script>     (function(){         var lc = $('#goToTop');         lc.floatdiv('rightbottom');     })() </script>

求解:还有没有更好,更简单的办法啊。。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消