基于jquery的返回顶部效果（兼容IE6）
更新时间：2011年01月17日 17:22:16 作者：
最近在写一个首页返回顶部的效果，因为IE6不兼容position:fixed的原因，一直找不到好的解决办法。在Google了一下，有了点眉目，加上一点自己的开发，总算误打误撞的把问题解决了。
最近也在学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文件哦！
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文件哦！
相关文章
今天共享一些令人振奋的UI教程，这些UI大部分是基于Jquery的插件，主要包括动态切换视图的相册、3D旋转分享按钮、Facebook admin Panel，下滑效果的导航Menu，滑翔购物车功能，漂亮的Form表单元素等等。2010-09-09
在不适用锚点的情况下也可以平滑滚动到页面的指定位置，看样子还不错吗，具体处理程序如下，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-05-05
图标斜着移动到指定的位置如何实现，本文给予了详细的解决方法，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了jQuery实现frame之间互通的方法,结合实例形式分析了jQuery实现frame父子框架之间的调用操作实现方法,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了jquery实现红色竖向多级向右展开的导航菜单效果,涉及jquery鼠标hover事件结合class样式动态添加与删除的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这篇文章主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下2016-01-01
升级了IE10，发现flexigrid无法显示数据，提示获取到了数据，但没任何报错任何显示,经过试验和跟踪，修改如下，有类似问题的朋友可以参考下哈2013-07-07
下面小编就为大家带来一篇jquery控制页面的展开和隐藏实现方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
基于JQuery的拖动插件有几个都相当好用，效果也很好，但再好，还是自己琢磨一个最好。所以，我的理念就是即使实际项目中使用别人的程序，自己也得根据自己的理解和想法写一个出来。那么今天，就来看看我的思路是不是可以实现拖动排序的功能2013-10-10
这篇文章主要为大家详细介绍了Jquery实现ready和bind事件的相关资料，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论