JQ判断页面是否到了浏览器顶部

最新推荐文章于 2020-05-27 14:51:58 发布
最新推荐文章于 2020-05-27 14:51:58 发布
阅读量1.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010585474/article/details/86007694
本文介绍了一种使用jQuery实现的页面滚动监听技巧，通过监听窗口滚动事件，判断页面是否已离开顶部超过100像素，以此来控制不同的显示效果，如导航栏的隐藏与出现。这种方法在网页设计中非常实用，可以提升用户体验。

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

$(window).on('scroll',function(){
	"use strict";
	 var scrolled = $(window).scrollTop();
	if(scrolled > 100){
	   console.log("离开顶部");
   }else{
	   console.log("到达顶部");
   }
});

 

南川玉
关注
使用jQuery判断网页是否滚动到浏览器底部
YabClass的博客
10-06 184
需要注意的是，由于浏览器的滚动事件是连续触发的，因此当用户滚动到底部时，可能会触发多次滚动事件。在Web开发中，经常会遇到需要判断用户是否滚动到网页底部的需求。本文将使用jQuery来检测用户是否滚动到浏览器底部，并提供相应的源代码示例。综上所述，以上代码实现了使用jQuery判断用户是否滚动到浏览器底部的功能。将滚动距离和可视区域高度相加，如果等于文档的高度，那么说明用户已经滚动到了底部。你可以根据实际需求，替换为其他的操作，比如展示加载更多的内容。获取浏览器窗口的高度，即可视区域的高度。
js判断滚动条是否到达顶部、底部 兼容各种浏览器
蓝魔
05-12 5728
iScroll demo: simple      window.onscroll=function(){ test(); } function test(){ var a = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; va
jquery 判断滚动条到达了底部和顶端的方法
12-03
代码如下:$(document).height()  //是获取整个页面的高度$(window).height()  //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的要获取顶端，只需要获取到scrollTop()==0的时候就是顶端； 要获取底端，只要获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了； 代码如下:$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离；$
jquery判断网页到达顶部和底部
Buddha_ITXiong的博客
05-23 1719
在网页应用中我们经常会遇到这样的需求当页面滑动到顶部的时候当页面滑动到底部的时候（滑动到底部加载更多数据）某个元素进入可视区范围的时候(图片懒加载)通常要实现这些判断的话就必须对网页中的各种高度有个清晰的了解，如页面可视高度，页面总内容高度以及页面滚动的高度等 var scrollTop = $(this).scrollTop();//滚动条的高度，即页面滚动的高度 var scrollHeigh...
jQuery判断滚动到底部或顶部
骆小胖~
08-24 1155
      2、页面可见区域的高度       3、整个HTML页面文档的高度 详解： （1）滚动条滚动的距离         $(window).scrollTop()和$(document).scrollTop()具有相同的效果，都为返回滚动条的垂直位置,但是$(window).scrollTop()被所有浏览器支持。所以建议以后用$(window).scrollTop()来获取滚动距离 （2）页面可见区域的高度         $(window).height() （3）整个HTML页面
jquery判断某个元素是否到了浏览器顶部 滚定监听
多年以后，我们在哪里。。
02-24 5589
$(window).scroll(function() { var top1 = $('#table').offset().top; var gun = $(document).scrollTop(); var top = top1-gun; if (top <= 0) { $('#table'.addClass('
JQ判断滚动条是否到达顶部或者底部
wbbott的博客
04-13 1144
JQ判断滚动条是否到达顶部或者底部
jQuery判断网页是否已经滚动到浏览器底部的实现方法
01-19
笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。 在了解下面的知识点之前，笔者这里先介绍几个概念。 $(window).height(); //用于获取浏览器显示区域的高度 $(window).width(); //用于获取浏览器...
基于jquery实现页面滚动时顶部导航显示隐藏
10-23
在页面滚动时，根据滚动的距离来判断是否需要隐藏或显示顶部导航栏。当滚动距离超过一定值时（例如550px），就会向顶部导航栏添加`hiddened`类，从而实现隐藏；而当滚动回页面顶部时，则移除`hiddened`类，同时添加`...
jQ+CSS3页面滚动内容元素动画特效特效代码
03-20
2. `$(this).offset().top`：获取元素距离文档顶部的距离，用于判断元素是否进入视口。 3. `.addClass()` 和 `.removeClass()`：分别用于添加和移除CSS类，从而切换元素的动画状态。 同时，CSS3的动画可能包括以下...
jquery判断浏览器后退时候弹出消息的方法
12-11
标题提到的“jquery判断浏览器后退时候弹出消息的方法”就是一个典型的例子，它利用了 `jQuery` 和浏览器的 `history API` 来实现在用户回退时显示警告消息。 首先，我们要了解浏览器的 `history API`。`window....
js判断滚动条是否已到页面最底部或顶部实例
11-30
本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下： 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就自动隐藏了，下面就来给大家介绍这种效果实现原理与方法。 当可视区域小于页面的实际高度时，判定为出现滚动条，即： 代码如下:if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true; 要使用 document.documentElement ，必须在页面头部加入声明： 代码
判断浏览器是否为顶层窗口
weixin_33851177的博客
02-12 832
<script type="text/javascript"> if (window!=top) // 判断当前的window对象是否是top对象 top.location.href ='https://www.baidu.com/'; // 如果不是，将top对象的网址自动导向被嵌入网页的网址 </scr...
jquery判断滚动条是否到达窗口顶部和底部
记录
10-17 5850
var doc_height = $(document).height(); var scroll_top = $(document).scrollTop();  var window_height = $(window).height(); doc_height是文档的高度，scroll_top是滚动条上部离文档顶部的高度，window_height表示窗口高度。 当 scrol
判断当前页面是否是顶层页面
cocosun
05-27 1287
跳转至顶层页面 top.location.href=contextPath + 'index'; 判断当前页面是否是顶层页面 //当不在顶级窗口时跳转 if(top!= self){ top.location.href=contextPath + 'index'; }
判断页面顶部和底部常见操作
weixin_34097242的博客
10-17 749
常见高度获取方法： scrollHeight —— 内容高度 scrollTop —— 滚动高度 clientHeight —— 容器高度   1.平滑滚动到顶部 $('.js_go_to_top').click(function () { $(".js_scroll_area").animate({scrollTop: 0}, 600);});   2.平滑滚动到底部 $('.j...
浏览器渲染基本原理（五）：优化渲染性能
weixin_30263277的博客
07-14 321
浏览器渲染基本原理（五）：优化渲染性能 渲染卡顿是怎么回事？ 网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画等。 大多数设备的刷新频率是60次/秒，也就说是浏览器对每一帧画面的渲染工作要在16ms内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。 为了保证页面的渲染效果，需要充分了解浏览器是如何处理HTML/JavaScript/CSS的...
JS判断是否到达浏览器顶部、底部，判断div滚动是否到底部，获取滚动条宽度
gzkahjl的博客
07-27 2812
------------------------------------JS判断是否到达浏览器顶部、底部----------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
JQ打造吸顶顶部菜单效果教程
- 判断滚动位置是否大于菜单元素距离顶部的距离（可以设置一个阈值，以控制何时触发浮动效果）。 - 如果条件满足，给菜单元素添加一个固定定位的类（如`fixed`）。 - 当页面继续滚动并且菜单项离开视窗顶部时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值