JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件


Posted in Javascript onOctober 10, 2016

现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容。起始这个组件,完全可以自己利用javascript的滚动事件window.onscroll与position:fixed手写。IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在《【CSS】IE6中的position:fixed问题与随滚动条滚动的效果》(点击打开链接)介绍过了。

下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件。具体效果如下:

IE6:

JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件

IE8:

JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件

FireFox:

JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件

首先是HTML+CSS的布局,在页面的最顶部布置一个id与name皆为page_top的<a></a>作为锚点,之所以要共同设置id与name一切为了兼容。

然后就是在右下角放一个position:fixed的,内容为↑的div,当然你想搞得炫一点可以弄成一张图片,甚至搞成♂也可以,这个div一开始是隐藏的。

最后是一大堆没有意义的、占位置的<p>,没什么好说的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>回到顶部</title>
 <style type="text/css">
 #top_div{
 position:fixed;
 bottom:0px;
 right:0px;
 display:none;
 /*兼容IE6的position:fixed*/
 _position: absolute;     
 _top: expression(eval( 
 document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
 (parseInt(this.currentStyle.marginTop,10)||0)- 
 (parseInt(this.currentStyle.marginBottom,10)||0))); 
 _margin-bottom:0px;
 _margin_right:0px;
 }
 </style>
 </head>
 <body>
 <a id="page_top" name="page_top"></a><!--回到顶部的锚点-->
 <div id="top_div"><a href="#page_top" style="text-decoration:none">↑</a></div>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 </body>
</html>

之后的脚本部分,一切很明朗了:

<script type="text/javascript">
 window.onscroll = function(){
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  var top_div = document.getElementById("top_div");
  if (t >= 300) {
   top_div.style.display = "inline";
  }
  else {
   top_div.style.display = "none";
  }
 }
</script>

仅有一个滚动事件window.onscroll,就是用户滚动滚动条就会触发这个时事件,var t = document.documentElement.scrollTop || document.body.scrollTop;能够兼容绝大部分浏览器,下面的t>=300是滚动条下滚300px之后,让top_div显示,这里用inline是以免block,会影响其它样式。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript 数组操作详解
Jan 29 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 #Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 #Javascript
jQuery继承extend用法详解
Oct 10 #Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 #Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
python列表去重的二种方法
2014/02/14 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Python3列表List入门知识附实例
2020/02/09 Python
python3.7调试的实例方法
2020/07/21 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
中学生操行评语大全
2014/04/24 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
鲁迅故里导游词
2015/02/05 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL