ScrollTop的兼容问题

今天在练习一个项目的时候,发现效果不能同时在谷歌和火狐正常显示,原来是因为通过判断DTD是否声明而导致了浏览器不兼容。

一下是解决的几种方法。

方法一:

// 获取scrolltop

    function getScrollTop() {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        return scrollTop;
    }

// 设置scrolltop

    function setScrollTop(scroll_top) {
        document.documentElement.scrollTop = scroll_top;
        window.pageYOffset = scroll_top;
        document.body.scrollTop = scroll_top;
    }

方法二:

var scrollPos;
if (typeof window.pageYOffset != ‘undefined‘)
{
   scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != ‘undefined‘ &&    document.compatMode != ‘BackCompat‘)
{
   scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != ‘undefined‘)
{
   scrollPos = document.body.scrollTop;
}

方法三 运用jQuery解决:

$(selector).scrollTop(offset)
时间: 2024-10-06 07:23:56

ScrollTop的兼容问题的相关文章

关于scrollTop的兼容问题

1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop: Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接用 docum

scrollTop浏览器兼容性获取和设置方法

最近用到scrolloTop()想去获取滚动条距离顶部的距离,结果只有chrome下面可以正常的获取scrollTop,结果ff和ie下这个值都等于0,使得许多效果比如屏幕滚动等等均无法正常实现.究其原因是scrollTop()在各个浏览器中的兼容性问题,在ff和ie,以及是否有doctype声明的时候都会有不同的效果. 下面是兼容各种浏览器的写法,分别为获取当前的scrollTop和设置scrollTop: //兼容方式获取scrolltop以及设置scrolltop function get

JS兼容性问题---Document的scrollTop

题目: 获取滚动条滚动过的距离 方案: var scrollTop = document.documentElement.scrollTop; 不兼容浏览器: Chrome 原因: Chrome不支持document.documentElement.scrollTob 解决方案: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 测试后结果: 完美解决

javascript 兼容总结

1 大多数兼容性问题可通过 if(){-}else{-} 来解决 2 this 的指向问题 3 1)构造函数中的 this 指 "."前的对象 4 2)new 出来的对象,this 指当前对象 5 3)回调函数中的 this 指 window 6 4)给当前元素添加事件 this 指当前元素 7 8 JS中出现的兼容性问题的总结 9 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 10   我们都知道js通过style不可以获取行

js的杂乱笔记

(1)offsetwidth = width +padding +border;(不加margin)offsetHeight = Height +padding +border;(不加margin)(2)offsetLeft:有定位的父元素的距离,如果父元素没有定位,就往上找.offsetLeft和style.left区别 1.style.left带有px 2.offsetleft可读写.style.left不可写. 3.(3)offsetParent:检测带有定位(绝对和相对都可以)最近的父节

分分钟学会JavaScript原生

JavaScript是一种基于对象和事件驱动的客户端脚本语言 组成: ECMAScript---------------标准语法 Bom(browser Object Model) Dom(document)-------浏览器提供的扩充 API : application programming interface 应用程序接口 js引入,内部和外部,最好都放到body里的</body>标签前; 外部:<script src="" > </script&

转:5种回到顶部的写法从实现到增强

http://www.cnblogs.com/xiaohuochai/p/5836179.html 前面的话 本文先详细介绍回到顶部的5种写法,然后对其实现功能增加,最后得到最终实现 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;">

原生态js,返回至顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回至顶部</title> <style type="text/css"> * { margin: 0; padding: 0; } #top { width: 50px; height: 50px; background-c

JavaScript学习笔记5 之 计时器 &amp; scroll、offset、client系列属性 &amp; 图片无缝滚动

一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( ); clearTimeout( ); 当计时器调用执行完毕时,它将返回一个timer ID, 如果将该ID传递给clearInterval,便可以终止代码的执行. 实例: 页面布局: <div id="wrap"