开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用jQuery each，scrollTop()返回零

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

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

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

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

以下是一个示例代码：

var scrollPositions = [];
$('.elements').each(function() {
  var scrollTop = $(this).scrollTop();
  scrollPositions.push(scrollTop);
});
console.log(scrollPositions);

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

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:如何从$ .each操作返回？(jQuery的)使用.each函数的Jquery悬停 jQuery -在函数内使用.each()在jquery中使用for循环(.each)在jQuery中使用两个ScrollTop()函数？使用scrollTop清除和设置JQuery中的间隔使用<xsl:for-each>时如何测试零记录？jQuery Json对象.each()循环返回未定义使用jquery .each()获取属性并使用as样式使用jQuery .each迭代关联数组使用.each()的jQuery更新元素如何在函数中使用jQuery .each 使用jQuery each()函数循环遍历classname元素如何使用jQuery从.each循环创建数组使用jQuery each()重新排序DOM元素顺序使用jQuery.each()方法显示隐藏元素使用位于each中的函数的值。.each函数的函数(jQuery)使用Rails ActionCable创建实时聊天，但.scrollTop jQuery不工作返回false似乎不会中断jQuery中的each()循环使用Lambda和Streams in For each并返回结果

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从零开始学 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

4904 0

【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.1K2 0

前端成神之路-02_jQuery

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

2.3K1 0

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()了,难住了好久...

6671 0

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.1K2 0

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

8033 0

jQuery基础--jQuery特殊属性操作

1、index() 会返回当前元素在所有兄弟元素里面的索引。 <script src="<em>jquery</em>...{ //$("html,body").stop().animate({scrollTop:0},3000); //scrollTop为0 //$(window).scrollTop...comment"> ☆ ☆ ☆ ☆ ☆ 　　each...= 0; i < $("li").length; i++) { // $("li").eq(i).css("opacity", (i+1)/10); // } //each

2.1K2 0

「jQuery」基础 - 02

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

2.8K2 0

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.7K2 0

JQuery的属性操作及事件

()); //返回：顶部滚动多少 })（4）带有动画的返回顶部$(window).scroll(function(){ $(document...).scrollTop()})完整例子：具体动画效果后续补发视频给小伙伴们返回顶部 $(window).scroll...(function () { console.log($(document).scrollTop()); if ($(document).scrollTop(...插件库-收集最全最新最好的jQuery插件小伙伴可以在这个网站找喜欢的作品，下载压缩包后，可以直接看效果，而且都有源码的哦

1.7K7 0

工作实战案例，瀑布流布局实现（方法：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.4K1 0

每个程序员都会的 35 个 jQuery 小技巧

CSS列，使用此种方式可以是两列的高度相同。...$(document).ready(function() { function equalHeight(group) { tallest = 0; group.each(function...你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。...-- Create an anchor tag --> Back to top 改变 scrollTop 的值可以调整返回距离顶部的距离，而 animate 的第二个参数是执行返回动作需要的时间...可以使用下面的代码片段： var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).

4.4K1 0

侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示

以及该楼层滑动到窗口某位置导航高亮的TOP值，点击导航页面对应楼层滑动到窗口的某位置的TOP值'的函数 function getItem(_list,newOptions){ _list.each(function...(); $.each(data,function(i,item){ if(nowScrollTop > item....delayTime : 200 }; var $body = $('body'),data = []; function getItem(_list,newOptions){ _list.each...(); $.each(data,function(i,item){ if(nowScrollTop > item....下载web的demo： http://www.jq22.com/jquery-info15387

2.7K2 0

你不需要 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 的使用方式。

1K3 0

一些好用的jquery技巧

1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function...注：小心scrollTop的一些错误行为。...height(); } }); $columns.height(height); 如果你希望所有列的高度相同： var $rows = $('.same-height-columns'); $rows.each...12、通过文本查找元素通过使用jQuery中的contains() 选择器，你可以找到元素内容的文本。...; } }); 14、AJAX调用错误处理当Ajax调用返回404或500错误时，就执行错误处理程序。如果没有定义处理程序，其他的jQuery代码或会就此罢工。

3.9K6 0

程序员都会的 35 个 jQuery 小技巧

列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。...-- Create an anchor tag -->Back to top 改变 scrollTop 的值可以调整返回距离顶部的距离，而 animate...的第二个参数是执行返回动作需要的时间(单位：毫秒)。...可以使用下面的代码片段： var $columns = $('.column');var height = 0; $columns.each(function () { if ($(this).height

2.6K0 0

收集的35个 jQuery 小技巧代码片段，可以帮你快速开发.

列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...$(document).ready(function() {function equalHeight(group) { tallest = 0; group.each(function(...你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件 // Back to top $('a.top').click(function () { $(document.body...).animate({scrollTop: 0}, 800); return false; });<!...可以使用下面的代码片段： var $columns = $('.column');var height = 0; $columns.each(function () { if ($(this).height

5.4K2 0

JQuery实现瀑布流布局

分享一个基于JQuery实现的瀑布流布局，效果如下：实现代码如下，欢迎大家复制粘贴。 <!...if (checkScroll()) { // 遍历模拟的json数据得，得出下标和值 $.each...存储每一行当中列的高度 var itemHeightList = []; // 遍历所有的图片容器，得出下标和值 $item.each...); // 当lastItemHeight小于页面滚动距离与屏幕高度之和时,返回true，具备加载条件，否则返回false，不具备 return (lastItemHeight...< scrollTop + documentHeight) ?

1.3K2 0

python_day15_前端_jQue

它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments...如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html(); 基础语法： jquery的基础语法：$(selector).action(...// 高度计算 scrollTop //获取下拉框位置并返回顶部 <!...定义为0返回最上头 function backTop() { $(window).scrollTop(0); } // 点击增加以及事件都能使用

6K2 0

JS使用lazyload进行图片懒加载

就能实现图片的按需加载了，也就是懒加载了方法： 1.使用lazyload插件，引用jquery.js和jquery.lazyload.js 2.将img标签中的src属性赋值为加载图片，即一张临时的...= Math.ceil($(this).scrollTop()); //滚动条与页面高度 //小数点原因向上取整 var curHeight = $(this).height();...//可视区域高度 var totalHeight = $(document).height(); //页面总高度 if (scrollTop + curHeight >...= totalHeight) { //滚动条触底加载 imgLists(pageNo++) } }) //获取数据 1.引用jQuery、jquery.lazyload...'/' + pageSize, dataType: 'json', success: function (res) { //成功 $.each

3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭