首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用jQuery each,scrollTop()返回零

使用jQuery each()函数可以遍历匹配元素集合中的每个元素,并对每个元素执行指定的函数。

scrollTop()是一个用于获取或设置匹配元素的滚动条的垂直位置的函数。当不传递任何参数时,它返回第一个匹配元素的当前滚动条垂直位置的整数值。如果有多个匹配元素,只返回第一个元素的滚动条位置。

在这个问答中,如果使用jQuery each()函数遍历一个元素集合,并在每个元素上调用scrollTop()函数,返回的结果将是每个元素的滚动条垂直位置的整数值。

这个功能在很多情况下都很有用,比如当需要获取多个元素的滚动条位置时,可以使用each()函数遍历元素集合,并将每个元素的滚动条位置存储到一个数组中,以便后续处理。

以下是一个示例代码:

代码语言:javascript
复制
var scrollPositions = [];
$('.elements').each(function() {
  var scrollTop = $(this).scrollTop();
  scrollPositions.push(scrollTop);
});
console.log(scrollPositions);

在这个示例中,我们使用了类名为"elements"的元素集合,并使用each()函数遍历每个元素。在每个元素上,我们调用scrollTop()函数获取滚动条的垂直位置,并将其存储到scrollPositions数组中。最后,我们通过console.log()打印出scrollPositions数组,以查看每个元素的滚动条位置。

推荐的腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

一、each 方法 each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使用的时候注意转成 jQuery...语法: // 参数1:元素集合索引 // 参数2:索引对应的DOM元素 元素集合.each(function (index, ele) { // ... }) 示例: $("#uu>li").each...我们在使用插件的时候只需要引入其对应的 css ,jQuery 文件以及html代码,经过少许的修改就可以得到相似的效果,大大节省了开发的时间,避免了重复造轮子。...,或者copy里面的代码到自己的文件中) 2、插件的制作和使用 jQuery插件制作方式主要有三种: 1、通过$.extend()来扩展jQuery; 2、通过$.fn向jQuery添加新的方法; 3、...参考链接(教你开发 jQuery插件):https://www.cnblogs.com/ajianbeyourself/p/5815689.html jQuery 插件的使用: 1、导入下载下来的 css

49040

【Groovy】集合遍历 ( 使用 for 循环遍历集合 | 使用集合的 each 方法遍历集合 | 集合的 each 方法返回值分析 )

文章目录 一、使用 for 循环遍历集合 二、使用 each 方法遍历集合 三、集合的 each 方法返回值分析 四、完整代码示例 一、使用 for 循环遍历集合 ---- 使用 for 循环 , 遍历集合...print i + " " } println "" 执行结果 : 1 2 3 二、使用 each 方法遍历集合 ---- 调用集合的 each...方法返回值分析 ---- 使用新的集合变量接收 集合 each 方法的返回值 , 如果修改该变量的值 , 则原集合的值也会跟着改变 , 说明 each 方法返回的集合就是原来的集合 ; 代码示例 :...集合的 each 方法 返回的集合就是原来的集合 // 接收 each 方法返回的集合 def list2 = list.each { print...集合的 each 方法 返回的集合就是原来的集合 // 接收 each 方法返回的集合 def list2 = list.each { print

3.1K20
  • 前端成神之路-02_jQuery

    注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。 语法2 ? ​...注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...创建、添加、删除 ​ jQuery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下: 语法总和 ? ​ 注意:以上只是元素的创建、添加、删除方法的常用方法,其他方法请参详API。...1.4.2. jQuery 位置操作 ​ jQuery的位置操作主要有三个: offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下: 语法 ?...案例:带有动画的返回顶部 1.核心原理: 使用animate动画返回顶部。

    2.3K10

    jQuery笔记(3)

    jQuery元素操作 主要是遍历,创建,添加,删除元素操作 遍历元素each() jQuery隐式迭代是对同一类元素做了相同的操作,如果想要给同一元素做不同的操作,就需要用到遍历 语法1:...,domEle是每个DOM元素对象,不是jQuery对象 所以想要使用jQuery方法,需要将这个DOM元素转换成jQuery对象 $(domEle) 语法2: $.each(object,...尺寸 本文由“壹伴编辑器”提供技术支持 jQuery位置 位置主要有三个: offset(),position(), scrollTop()/scrollLeft()(可以获取+设置) (真的好多啊...,显示"返回顶部"的按钮,点击以后就可以回到页面顶部的功能....因为scrollTop( )是可以获取和设置的,所以scrollTop(0)就是返回顶部 电梯导航栏案例: 一开始把offset()记成width()了,难住了好久...

    66710

    jQuery 尺寸、位置操作

    jQuery 尺寸、位置操作 ​ jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下。 1.1. ...jQuery 尺寸操作 ​ jQuery 尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型。 语法   1.以上参数为空,则是获取相应值,返回的是数字型。...1.2. jQuery 位置操作 ​ jQuery的位置操作主要有三个: offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下: 语法 1. offset...3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧 ① scrollTop() 方法设置或返回被选元素被卷去的头部。...案例:带有动画的返回顶部 1.核心原理: 使用animate动画返回顶部 2.animate动画函数里面有个scrollTop 属性,可以设置位置 3.但是是元素做动画,因此 $(“body,html

    1.1K20

    JQuery第三节

    Table of Content 1. jQuery特殊属性操作 1.1. val方法 1.2. html方法与text方法 1.3. width方法与height方法 1.4. scrollTop与scrollLeft...触发事件 2.5. jQuery事件对象 3. jQuery补充知识点 3.1. 链式编程 3.2. each方法 3.3....因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。 end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。...【案例:五角星评分案例.html】 3.2. each方法 jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。...多库共存 jQuery使用$作为标示符,但是如果与其他框架中的$冲突时,jQuery可以释放$符的控制权. var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

    80330

    jQuery基础

    jQuery冲突问题 使用jQuery时, $ 是访问jQuery的标志,但是如果有其他方法与jQuery中的 $冲突时,可以释放$的使用权 ,还可以自定义一个符号来代替 $使用。...示例如下 /* 1.释放$的使用权 注意点:释放操作必须在边写其他jQuery代码之前编写..., 释放之后就不能再使用$,改为使用jQuery jQuery.noConfict(); 2.自定义一个访问符号*/...对象 1.什么是jQuery对象 jQuery对象是一个伪数组 2.什么是伪数组 有0-length-1的属性,并且有length属性 jQuery的静态方法 each方法和 map方法 jQuery...中each静态方法和map静态方法的区别 1.each静态方法默认的返回值就是,遍历谁就返回谁 map静态方法默认的返回值是一个空数组 2.each静态方法不支持在回调函数中对遍历的数组进行处理

    1.7K20

    工作实战案例,瀑布流布局实现(方法:CSS3,原生JS,jQuery)。

    涉及技术点: HTML + CSS简单布局 jQuery基础运用,瀑布流布局实现3种方法:原生JS,jQuery,CSS3 CSS3版本: 瀑布流布局(CSS版本) 代码: /*css代码*/...原因:当拉宽/窄浏览器后,某些已经使用了position定位的图片节点不能恢复到第一排,因为第一排不能有绝对定位的样式,所以在判断不是第一排加绝对定位之前要把前面所有设置过的样式全部清。...=document.body.scrollTop || document.documentElement.scrollTop; var height=document.body.clientHeight...":"P_06.jpg"}]} $(window).on("scroll",function(){ if(checkScrollSlide()){ $.each...=$(window).scrollTop(); var documentH=$(window).height(); return (lastDis<scrollTop+documentH

    1.4K10

    你不需要 jQuery,但你需要一个 DOM 库

    除此之外,jQuery API 的使用形式也非常统一。相反,原生 JS 的 API 使用方式就比较多样了,既有赋值,又有传参等。另外原生 JS 的 API 名称冗长,不方便记忆。...Zepto 对原生方法做了进一步的抽象,使用更简单。正如我在上文说过的,既然 jQuery 的 API 简洁易用,而且我们也更加熟悉,那我们为什么不将 jQuery 和原生 JS 结合起来呢?...this[0].scrollTop : this[0].pageYOffset return this.each(hasScrollTop ?...this[0].pageYOffset : this[0].defaultView.pageYOffset; return this.each(hasScrollTop...总结 这是一个好的时代,也是一个坏的时代,jQuery 的落幕确实让人感叹,但是我们完全没必要因为 jQuery 的落幕而放弃 jQuery使用方式。

    1K30

    Pbcms Ajax 无刷新加载内容

    response.data;             if( response.code ){                 //获取数据成功,进行循环,value就是文章对象                 jQuery.each...//使用jQuery的scroll()方法来监听页面滚动 jQuery(window).scroll(function(){     //当前窗口和页面顶部的距离     var WindowTop ...= jQuery(window).scrollTop();          //可视窗口区域高度     var WindowHeight = jQuery(window).outerHeight()...                if( response.code ){                                          //获取数据成功                     jQuery.each...response, status ){             var Data = response.data;             if( response.code ){                 jQuery.each

    4.2K20
    领券