判断scroll是否滚动到底部以及实现回到顶部
来源:互联网 发布:圣火名尊法器进阶数据 编辑:程序博客网 时间:2024/05/21 06:20
判断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
也可以使用 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)。
- 判断scroll是否滚动到底部以及实现回到顶部
- 判断ScrollView 是否滚动到底部或顶部
- 判断ScrollView是否滚动到顶部或底部
- android正确判断 ListView 是否滚动到顶部或者底部
- jq判断scroll是否到底部
- Jquery scroll 向下滚动到据顶部超过1000px时,回到顶部
- js判断滚动条是否已到页面最底部或顶部实例
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- ios tableview是否滚到顶部和底部以及滚动的方向
- jquery实现"跳到底部","回到顶部"效果(类似锚)
- jquery实现"跳到底部","回到顶部"效果
- jquery实现"跳到底部","回到顶部"效果
- jquery判断滚动条是否到达窗口顶部和底部
- jQuery判断滚动条是否在顶部、底部。
- JQ判断滚动条是否到达顶部或者底部
- 监听scroollview、listview、gridview页面滑动,判断是否滑动到顶部以及底部
- Java开发中的23种设计模式详解(转)
- Android设备ID简析
- STL源码剖析——deque的实现
- [BFS] POJ 3087
- 字符编码中的一些概念辨析
- 判断scroll是否滚动到底部以及实现回到顶部
- 蓝桥杯 算法提高 实数相加
- Vim命令合集(转)
- 大整数相加
- It's no longer allowed to omit the '-loader' suffix when using loaders.
- Kylin 2.0升级总结
- Linux学习笔记DayNote01
- 超完整的Chrome浏览器客户端调试大全
- 微信小程序页面间传值方法