html监听页面滚动高度,jquery如何监听滚动条事件？

jquery如何监听滚动条事件？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

问题：

在浏览很多网页中都会发现，当滚动条滚动到一定的位置的时候就出显示一个返回到顶部的小图标，那如何监听判断滚动条滚动到指定的位置后触发某个事件呢？

方法：

可以通过使用$(window).scroll()进行滚动条的监听

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

代码：$(window).scroll(function(){

//获取滚动条滚动的位置

var top = $(window).scrollTop();

if(top > 100){

alert("滚动条滚动大于100显示弹出框")

}

})

具体介绍：

1、打开html开发工具，新建一个html代码页面，在html代码页面输入大量的文本内容，确保在浏览器上能有滚动条出现

2、引入一个jquery.js库。在title标签后面创建一个script标签，然后引入jquery.js文件

3、新建一个script标签，在这个标签里面创建使用$(window).scroll()监听滚动条滚动事件(案例中判断当滚动条滚动高度超过100的时候就出现一个弹出框)

代码：$(function(){

$(window).scroll(function(){

var top = $(window).scrollTop();

if(top > 100){

alert("滚动条滚动大于100显示弹出框")

}

})

4、保存html代码后使用浏览器打开，然后滚动Y轴滚动条，发现滚动到一定位置后会出现一个alert弹出框表示监听滚动条成功

更多web前端开发知识，请查阅 HTML中文网！！

html监听页面滚动高度,jquery如何监听滚动条事件？相关推荐

html+监听+页面滚动到底部,JS监听页面滚动到底部事件
敏捷开发之Scrum扫盲篇现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解, ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
vue监听页面滚动事件
方法:监听滚动实现通过addEventListener方式监听通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...
监听页面滚动触发事件，页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...
监听某个区域滚动_监听页面滚动及滚动到指定位置
一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scrollTop就是触发滚轮 ...
vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置
1.点击某个标签,滚动到某个具体位置 switchHeight(num) { this.selectNum = num; if (num == 0) { document.getElementById ...
如何设置页脚跟随页面滚动高度不够时固定在底部
在开发PC页面的时候我们经常遇到底部栏要自适应页面,页面内容少的时候要固定在底部,内容超出的时候要跟随页面滚动.这里介绍一个比较容易的方法只需设置页面内容最小高度min-height比如min-he ...
html屏幕滚动事件监听,JQuery监听页面滚动事件
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var scrollTop = $(window).scrollTop(); 2.获取指定元素的页面位置: $(obj).offset().top; ...
html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个 ...

html监听页面滚动高度,jquery如何监听滚动条事件？

html监听页面滚动高度,jquery如何监听滚动条事件？相关推荐

最新文章

热门文章