基于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中的call实现继承
Jan 22 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 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
快速开发一个PHP扩展图文教程
2008/12/12 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
php中取得文件的后缀名?
2012/02/20 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
六年级学生评语
2014/04/22 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
埃及王子观后感
2015/06/16 职场文书
开业庆典致辞
2015/08/01 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server