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 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
前台js调用后台方法示例
Dec 02 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
JS中一些高效的魔法运算符总结
May 06 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
php 结果集的分页实现代码
2009/03/10 PHP
PHP取进制余数函数代码
2012/01/19 PHP
yii的CURD操作实例详解
2014/12/04 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
微信小程序实现转盘抽奖
2020/09/21 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python 求数组局部最大值的实例
2019/11/26 Python
pymysql模块使用简介与示例
2020/11/17 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
英语老师推荐信
2014/02/26 职场文书
计划生育标语
2014/06/23 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
电影地道战观后感
2015/06/04 职场文书
六年级数学教学反思
2016/02/16 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技