主页 > 前端 > javascript >
来源:自学PHP网 时间:2014-09-19 14:47 作者: 阅读:次
[导读] 我们经常会看到很多网站会有一个在右下解移动的,点击可直接回到顶部的按钮哦,下面我来介绍利用js实现回到顶部的方法,有需要的朋友可参考。...
重要的是全部使用js来实现,不需要在html、css中增加任何内容,甚至都不需要图片,只要引用js即可。而且全面兼容IE6。由于考虑兼容性问题 实现原理是我们获取当前ie高度然后再滚动上来 前主流浏览器除IE外对浏览器标准支持都比较好,例如chrome、firefox以及safari等。对应后者,可以通过window对象的pageYOffset属性来取到当前滚动条到页面顶部的高度。对于万恶的IE来说就比较麻烦一点,它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode,页面声明了DOCTYPE时为Standards Mode,反之为Quirks Mode。可以使用document.compatMode来获取,该方法也同时支持其他浏览器,其返回值为BackCompat或CSS1Compat,含义如下:
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)由于IE对盒模型的渲染跟文档类型有很大关系,所以获取滚动条高度的方式也是不一样的。当文档类型为Standards Mode,获取方式为:document.documentElement.scrollTop,而Quirks Mode时则为:document.body.scrollTop。 理解上面的所提到的差异后,用代码实现就很容易了,具体实现的代码如下:
甚至可以修改上述代码,使用一行代码搞定,但是可读性没有上面好,代码如下:
另外除了上述document.compatMode的方式来获取文档类型外,还可以使用 document.defaultView来获取。在IE 9以下的Quirks Mode中document不支持defaultView属性 计了这么多来下面来看实现代码代码如下:
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com