基于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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
js运动应用实例解析
Dec 28 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
js实现表格数据搜索
Aug 09 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
php 信息采集程序代码
2009/03/17 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python备份文件的脚本
2008/08/11 Python
详解python中requirements.txt的一切
2017/03/03 Python
浅谈对yield的初步理解
2017/05/29 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
String是最基本的数据类型吗?
2013/06/13 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
班组长岗位职责范本
2014/01/05 职场文书
公司办公室岗位职责
2014/03/19 职场文书
售后服务承诺书
2014/03/26 职场文书
机关办公室岗位职责
2014/04/16 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
《我是什么》教学反思
2016/02/16 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书