基于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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
js中的闭包实例展示
Nov 01 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python实现的桶排序算法示例
2017/11/29 Python
NumPy 数组使用大全
2019/04/25 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
技校生自我鉴定范文
2013/09/26 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
支教个人总结
2015/03/04 职场文书
党支部工作总结2015
2015/04/01 职场文书