基于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 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
在react中使用vue的状态管理的方法示例
May 02 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
django的csrf实现过程详解
2019/07/26 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python selenium自动化测试模型图解
2020/04/15 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
高考备战决心书
2014/03/11 职场文书
听课评语大全
2014/04/30 职场文书
职称评定个人总结
2015/03/05 职场文书
会计主管岗位职责
2015/04/02 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
在校证明模板
2015/06/17 职场文书
小学中队委竞选稿
2015/11/20 职场文书