基于jquery的返回顶部效果(兼容IE6)
2011-01-17 00:00
921 查看
最近也在学jquery,就顺便记录一下了。
HTML
CSS
top.js
最后不要忘记了jQuery.js文件哦!
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文件哦!
相关文章推荐
- 基于jquery的返回顶部效果(兼容IE6)
- 返回顶部效果jquery(位置兼容IE6)
- 基于jquery多种切换效果的焦点图(兼容ie6)
- jquery编写兼容IE6的返回顶部功能
- 基于jquery多种切换效果的焦点图(兼容ie6)
- 基于jquery多种切换效果的焦点图(兼容ie6)
- 基于jQuery实现返回顶部实例代码
- jQuery实现返回顶部效果
- 用jQuery实现渐隐渐显的返回顶部效果(附多图)
- 返回顶部链接效果--jQuery实现
- 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- 【代码片段】jquery 回到顶部效果(全兼容浏览器)可自定义出现位置和页面宽度
- jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
- 一个带微博按钮的jquery返回顶部效果代码
- jquery返回顶部和底部插件和解决ie6下fixed插件
- ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果
- ASP.NET jQuery 食谱9 (通过控件hyperlink实现返回顶部效果)
- jquery实现返回顶部效果
- [转载] jQuery实现一个动画版返回顶部和底部的效果