基于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图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
javascript每日必学之循环
Feb 19 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
完美的js图片轮换效果
Feb 05 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
vue-swiper的使用教程
Aug 30 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
用django设置session过期时间的方法解析
2019/08/05 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
二年级体育教学反思
2014/01/15 职场文书
安全生产检讨书
2014/01/21 职场文书
企业业务员岗位职责
2014/03/14 职场文书
家长通知书家长评语
2014/04/17 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
公司授权委托书范本
2014/09/18 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
毕业生个人自荐书
2015/03/05 职场文书
世界文化遗产导游词
2019/08/07 职场文书
浅谈Python协程asyncio
2021/06/20 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android