判断scroll是否滚动到底部以及实现回到顶部

最新推荐文章于 2025-02-09 14:33:22 发布

kaelyn_X

最新推荐文章于 2025-02-09 14:33:22 发布

阅读量8.1k

点赞数

分类专栏： questions 文章标签： scroll 滚动条回到顶部

本文链接：https://blog.youkuaiyun.com/kaelyn_X/article/details/78416591

版权

questions 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用JavaScript和jQuery判断scroll是否滚动到底部，并详细讲述了实现页面回到顶部的多种方法，包括平滑滚动效果。内容涉及Element.clientHeight、scrollTop、scrollHeight等属性以及onscroll事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

判断scroll滚动到底部以及实现回到顶部

介绍一下如何在srcoll滚动到指定位置后执行指定函数和如何实现回到顶部功能。

判断scroll滚动到底部以及实现回到顶部

js实现

window.onscroll = function(){
    var clientHeight = document.documentElement.clientHeight;
    var scrollTop = document.body.scrollTop;
    var scrollHeight = document.body.scrollHeight;
    if(scrollTop + clientHeight == scrollHeight){
    　　　　console.log("到底部了！");
    }
}

GlobalEventHandlers.onscroll 是元素的 scroll 事件处理函数，所以每当浏览器的滚动条发生改变的时候，便执行 window.onscroll 函数。
Element.clientHeight 返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距，我们用它来获取浏览器内容可视区域的高度。

使用 document.documentElement.clientHeight 获取浏览器视口大小，documentElement 是整个节点树的根节点root，即<html> 标签，若使用 document.body.clientHeight ，则得到的数值和 document.body.scrollHeight 一样。

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数，即滚动条在Y轴上的滚动距离。

Element.scrollHeight 是计量元素内容高度的只读属性，包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的margin，即内容可视区域加上溢出区域的总高度。

由此我们可以看到，滚动条滚到底部的条件是 scrollTop + clientHeight == scrollHeight，所以当滚动条达到底部时候满足条件，便会执行我们写好的函数。
当然，如果想实现在滚动条准备滑动准备到底部之前执行函数（比如准备滚到底部时网页可以开始加载新内容）的话，可以这样写条件(scrollTop + clientHeight) / scrollHeight >= 0.9，该条件会在滚动条滚动距离超过 90% 的时候为真。

jQuery实现

我们也可以用 jQuery 更加简单的实现：

$(window).scroll(function(){
   var clientHeight = $(this).height();
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　if(scrollTop + clientHeight == scrollHeight){
　　　　alert("到底部了！");
　　}
});

回到顶部

我们可以把 Element.scrollTop 的值赋值为 0 实现回到顶部：

document.body.scrollTop = 0

也可以使用 JS 的 scrollTo(xpos,ypos) 函数：

window.scrollTo(0，0);

xpos 是指要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 是指要在窗口文档显示区左上角显示的文档的 y 坐标。

也可以使用 scrollBy(xnum,ynum) 函数。

xnum 是指把文档向右滚动的像素数。
ynum 是指把文档向下滚动的像素数。

这样子实现回到顶部非常生硬，一下子直接跳到顶部了，我们可以通过设置定时器的方法实现每过一段时间（非常短）把 scrollTop 逐渐减小：

function returnTop() {
    //向上滑动
    window.scrollBy(0,-100);
    if(document.body.scrollTop>0) { 
        setTimeout('returnTop()',10);
    }
}

当然，最简单的还是使用 jQuery 来实现：

$('body,html').animate({scrollTop:0},"normal");

其中，根据需要可以选择三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。