scrollTop, offsetTop, pageYOffset, scrollY 的区别

DOM对象的scrollTop用于获取或者设置一个元素里滚动的距离（垂直）。例如：documentdocumentElementscrollTop可以获取当前页面的滚动高度，也可以获取某个DOM元素的滚动距离，例如：documentquerySelector('content')scrollTop，前提是content元素存在，并且可以滚动。

另外，scrollTop还可以把滚动条移到指定位置，例如：

DOM对象的offsetTop与scrollTop完全不同，它是上边框相对于父元素上边框的距离，一般是固定的，不随滚动变化。

这两个都能返回视窗滚动过的距离，相对来说，pageYOffset兼容性更好，一般我们只用 pageYOffset就行。但两者都不兼容IE9以下，另外 scrollY 可以赋值，让视窗滚动到指定位置。pageYOffser和scrollY都与scrollTop不同，pageYOffset和scrollY都只存在window对象里。

看下面等式：

一、原生js通过windowonscroll监 听

windowonscroll = function() {

    //为了保证兼容性，这里取两个值，哪个有值取哪一个

    //scrollTop就是触发滚轮事件时滚轮的高度

    var scrollTop = documentdocumentElementscrollTop || documentbodyscrollTop;

    consolelog(“滚动距离” + scrollTop);

}

二、Jquery通过$(window)scroll()监听

$(window)scroll(function() {

//为了保证兼容性，这里取两个值，哪个有值取哪一个

//scrollTop就是触发滚轮事件时滚轮的高度

var scrollTop = documentdocumentElementscrollTop || documentbodyscrollTop;

consolelog(“滚动距离” + scrollTop);

})

将页面滚动到指定位置

主要使用的是锚点技术，锚点元素通过scrollTop值改变进行定位。

锚点

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样，是一种页面内的超级链接。

法一 直接使用scrollTop

使用scrollTop方法，x为滚轮的高度

$(“body,html”)scrollTop(x);

加动画的滚动

// 滚动到指定位置

$(‘html, body’)animate({

scrollTop: $("#div1")offset()top

}, 2000);

// 滚动到顶部，指定距顶部的距离

$(’scroll_top’)click(function(){

$(‘html,body’)animate({

scrollTop: ‘0px’

}, 800);

});

方法二 利用hash

hash

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

locationhash=anchorname。

例如：以下地址的hash为#hot

>

废话不多说，直接贴代码：

$(window)scroll(function () {var scrollTop = $(this)scrollTop();

var scrollHeight = $(document)height();

var windowHeight = $(this)height();

if (scrollTop + windowHeight == scrollHeight) {

//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的 *** 作

//var page = Number($("#redgiftNextPage")attr('currentpage')) + 1;

//redgiftList(page);

//$("#redgiftNextPage")attr('currentpage', page + 1);

}

});

在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画，然后用到web移动端却没什么卵用，会出现滚动不流畅，卡顿，失灵等等现象。

这是因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况

为此，移动端判断次数好些，

下面是具体实现代码，兼容pc：

//返回顶部动画

//goTop(500);//500ms内滚回顶部

function goTop(times){

if(!!!times){

$(window)scrollTop(0);

return;

}

var sh=$('body')scrollTop();//移动总距离

var inter=13333;//ms,每次移动间隔时间

var forCount=Mathceil(times/inter);//移动次数

var stepL=Mathceil(sh/forCount);//移动步长

var timeId=null;

function ani(){

!!timeId&&clearTimeout(timeId);

timeId=null;

//consolelog($('body')scrollTop());

if($('body')scrollTop()<=0||forCount<=0){//移动端判断次数好些，因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况

$('body')scrollTop(0);

return;

}

forCount--;

sh-=stepL;

$('body')scrollTop(sh);

timeId=setTimeout(function(){ani();},inter);

}

ani();

}

以上就是关于scrollTop, offsetTop, pageYOffset, scrollY 的区别全部的内容，包括:scrollTop, offsetTop, pageYOffset, scrollY 的区别、两种监听页面滚动的方法、我要做一个移动端页面下拉滚动分页加载的效果，不知道怎么做等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！