基于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 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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世纪万年历
2006/12/06 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
php Session无效分析资料整理
2016/11/29 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
python多重继承实例
2014/10/11 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python 利用zmail库发送邮件
2020/09/11 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
中专自我鉴定
2014/02/05 职场文书
批评与自我批评材料
2014/02/15 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
在Python 中将类对象序列化为JSON
2022/04/06 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android