基于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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
java必学必会之static关键字
Dec 03 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
纯js实现手风琴效果
Apr 17 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
uni-app使用微信小程序云函数的步骤示例
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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
Javascript学习指南
2014/12/01 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
小程序云开发实战小结
2018/10/25 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python实现停车管理系统
2018/11/30 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
幼教简历自我评价
2014/01/28 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
督导岗位职责
2015/02/04 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书