基于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 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
理解javascript正则表达式
Mar 08 Javascript
详解ES6中的let命令
Apr 05 Javascript
js模拟微博发布消息
Feb 23 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
详细分析Node.js 模块系统
Jun 28 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
MySQL相关说明
2007/01/15 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
Javascript Global对象
2009/08/13 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
K-近邻算法的python实现代码分享
2017/12/09 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
求职自荐信范文格式
2013/11/29 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
假释思想汇报范文
2014/10/11 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js