判断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，即 标签，若使用 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)。