最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现回到顶部按钮程序代码
时间:2013-04-01 编辑:简简单单 来源:一聚教程网
重要的是全部使用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,含义如下:
代码如下 | 复制代码 |
BackCompat Standards-compliant mode is not switched on. (Quirks Mode) |
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)由于IE对盒模型的渲染跟文档类型有很大关系,所以获取滚动条高度的方式也是不一样的。当文档类型为Standards Mode,获取方式为:document.documentElement.scrollTop,而Quirks Mode时则为:document.body.scrollTop。
理解上面的所提到的差异后,用代码实现就很容易了,具体实现的代码如下:
代码如下 | 复制代码 |
function getScrollTop1() { if ('pageYOffset' in window) { return window.pageYOffset; } else if (document.compatMode === "BackCompat") { return document.body.scrollTop; } else { return document.documentElement.scrollTop; } } |
甚至可以修改上述代码,使用一行代码搞定,但是可读性没有上面好,代码如下:
代码如下 | 复制代码 |
function getScrollTop() { |
另外除了上述document.compatMode的方式来获取文档类型外,还可以使用 document.defaultView来获取。在IE 9以下的Quirks Mode中document不支持defaultView属性
计了这么多来下面来看实现代码代码如下:
代码如下 | 复制代码 |
(function() { function $() { function getScrollTop() { function bindEvent(event, func) { bindEvent('load', if (isIE && isIE < 7) { var html = ' '; var el = document.createElement('DIV'); el.id = btnId; el.style.cssText = css; el.innerHTML = html; document.body.appendChild(el); el.onclick = function() { el.onmouseover = function() { el.onmouseout = function() { bindEvent('scroll', if (top > 0) { if ($(btnId)) $(btnId).style.display = display; |
-
下一个: 织梦系统首页调用指定分类栏目内容
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31