js获取滚动条偏移值

JavaScript011

js获取滚动条偏移值,第1张

滚动条的偏移值的兼容问题

1、chrome支持的属性： document.body.scrollTop

2、chrome以外的其它浏览器支持的属性： document.documentElement.scrollTop

3、以上的属性可读，可写；

所以可以通过如下的方式获取滚动条的值

同样设置滚动条的偏移值:

另外可以通过window.onscroll监听滚动轴滚动事件；

使用js获取的相关方法

//回到页面顶部

    $("#goTotop").click(function(){

        $('body,html').animate({scrollTop:0},1500) //点击按钮让其回到页面顶部

    })

     

    $(window).scroll(function() {

        var yheight1=window.pageYOffset //滚动条距顶端的距离

        var yheight=getScrollTop() //滚动条距顶端的距离

        var height =document.documentElement.clientHeight//浏览器可视化窗口的大小

        var top=parseInt(yheight)+parseInt(height)-217

        var divobj=$(".kf")

        divobj.attr('style','top:'+top+'px')

    })

     

/**

 * 获取滚动条距离顶端的距离

 * @return {}支持IE6

 */

function getScrollTop() {

        var scrollPos

        if (window.pageYOffset) {

        scrollPos = window.pageYOffset }

        else if (document.compatMode && document.compatMode != 'BackCompat')

        { scrollPos = document.documentElement.scrollTop }

        else if (document.body) { scrollPos = document.body.scrollTop } 

        return scrollPos 

}