作家
登录

基于jquery的返回顶部效果(兼容IE6)

作者: 来源:www.28hudong.com 2013-03-30 01:02:25 阅读 我要评论

最近也在学jquery,就顺便记录一下了。 HTML 复制代码 代码如下: <div class="scroll"></div> <script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script> <script type="text/javascript" src="../skins/css/top.js" charset="UTF-8"></script> CSS 复制代码 代码如下: .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则图片紧贴在顶部滚动*/ } html{_text-overflow:ellipsis;} /*解决IE6下图片抖动*/ top.js 复制代码 代码如下: $(document).ready(function(){ var show_delay; var scroll_left=parseInt((document.body.offsetWidth-960)/2)+961; //960为页面宽度 $(".scroll").click(function (){ document.documentElement.scrollTop=0; document.body.scrollTop=0; }); $(window).resize(function (){ scroll_left=parseInt((document.body.offsetWidth-960)/2)+961; $(".scroll").css("left",scroll_left); }); reshow(scroll_left,show_delay); }); function reshow(marign_l,show_d) { $(".scroll").css("left",marign_l); if((document.documentElement.scrollTop+document.body.scrollTop)!=0) { $(".scroll").css("display","block"); } else { $(".scroll").css("display","none");} if(show_d) window.clearTimeout(show_d); show_d=setTimeout("reshow()",500); } 最后不要忘记了jQuery.js文件哦!

  推荐阅读

  js对数字的格式化使用说明

在jsp页面上可以使用<fmt:------对数字对行格式化 在js中---------- Javascript也提供了对数字进行格式化输出的支持 Number对象提供的几种格式化函数: toExponential([fractionDigits]) :将数字按科学计数法格式>>>详细阅读


本文标题:基于jquery的返回顶部效果(兼容IE6)

地址:http://www.17bianji.com/kaifa2/JS/25021.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)