判断scroll是否滚动到底部以及实现回到顶部
判断scroll滚动到底部以及实现回到顶部
介绍一下如何在srcoll滚动到指定位置后执行指定函数和如何实现回到顶部功能。
目录:
- 判断scroll滚动到底部以及实现回到顶部
- js实现
- jQuery实现
- 回到顶部
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
- 1
也可以使用 JS 的 scrollTo(xpos,ypos) 函数:
window.scrollTo(0,0);
- 1
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");
- 1
其中,根据需要可以选择三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。