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


Posted in Javascript onJanuary 17, 2011

最近也在学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文件哦!
Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 #Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 #Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 #Javascript
JavaScript去掉数组中的重复元素
Jan 13 #Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 #Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 #Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
php获取某个目录大小的代码
2008/09/10 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JS简单计算器实例
2015/01/20 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
教育局长自荐信范文
2013/12/22 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
村干部培训方案
2014/05/02 职场文书
党员个人承诺书
2015/04/27 职场文书
患者身份识别制度
2015/08/06 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
Python面向对象编程之类的概念
2021/11/01 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android