基于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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
小程序点击图片实现png转jpg
Oct 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中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python三级目录展示的实现方法
2016/09/28 Python
python3大文件解压和基本操作
2017/12/15 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python判断是空的实例分享
2020/07/06 Python
另类冲刺标语
2014/06/24 职场文书
移交协议书
2014/08/19 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
导游词格式
2015/02/13 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS