开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JQuery ScrollTop()适用于窗口事件，但不适用于div (在chrome中测试)

JQuery的scrollTop()方法用于获取或设置匹配元素相对滚动条顶部的偏移量。它适用于窗口事件，但在某些情况下可能不适用于div元素，特别是在Chrome浏览器中的测试中。

scrollTop()方法适用于窗口事件，可以通过监听窗口的滚动事件来获取或设置滚动条的位置。例如，可以使用scrollTop()方法来实现当用户滚动页面时，显示或隐藏返回顶部按钮的功能。

然而，在某些情况下，scrollTop()方法可能在div元素上不起作用，特别是在Chrome浏览器中的测试中。这可能是由于div元素的样式或布局问题导致的。在这种情况下，可以尝试使用其他方法来实现相同的效果，如使用CSS的scroll-behavior属性或使用原生JavaScript的scrollTo()方法。

总结：

scrollTop()方法适用于窗口事件，用于获取或设置匹配元素相对滚动条顶部的偏移量。
在某些情况下，scrollTop()方法可能在div元素上不起作用，特别是在Chrome浏览器中的测试中。
可以尝试使用其他方法来实现相同的效果，如使用CSS的scroll-behavior属性或使用原生JavaScript的scrollTo()方法。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（CDB）：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
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

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

有帮助

没帮助

相关·内容

jQuery实现图片懒加载

.height();//整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）...()不适用于window 和 document对象，对于window 和 document对象可以使用.height()代替。...在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。...(包括滚动轴宽度)：window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari 可视窗口高度，不包括浏览器顶部工具栏： window.innerHeight...下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 lazyRender，若在300毫秒内再次滚动则清除原来的定时器 if(clock){

13.6K2 0

再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性

pageX/Y获取到的是触发点相对文档区域左上角距离，以页面为参考点，不随滑动条移动而变化问题二：在IE 中，event 对象有 x, y 属性（事件发生的位置的 x 坐标和 y 坐标）火狐中没有。...getComputedStyle(obj , false ) 是支持 w3c (FF12、chrome 14、safari)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法...if (invalid) { cancelEvent(evt) } } 确定浏览器窗口的尺寸对于主流浏览器来说，比如IE9、Firefox，Chrome和Safari，支持名为innerWidth... 和 innerHeight的窗口对象属性，它返回窗口的视口区域，减去任何滚动条的大小。... 以及 Safari 5 支持拖放为了使元素可拖动，需把 draggable 属性设置为 true ： | 事件 | 描述 | | ----

9434 0

Vue 滚动条定位问题

使用jquery的时候可以直接animate方法完成滑动滚动条的动作，但是在vue项目中会很蛋疼。...$('.findcar_brand_ul').animate({scrollTop: liheight}, 300); Vue中又没有相关的组件可以调用，载入JQuery麻烦，要是需要临时解决的话可以使用...= distance // // Chrome // document.body.scrollTop =...= distance // // Chrome // document.body.scrollTop =...; } } 说明： demo环境：Vue.version >> "2.2.6" 修改代码使用div中滚动条，取消浏览器窗口滚动条的获取

8562 0

jQuery

jQuery 对象内部的元素中找出部分匹配的元素, 并封装成新的 jQuery 对象返回方法描述 first() 获取第一个元素 last() 获取最后个元素 eq(index) 获取第 N 个元素... 4.事件坐标方法描述 event.offsetX 原点是当前元素左上角 event.clientX 原点是窗口左上角 event.pageX 原点是页面左上角代码示例：..."btn1">测试事件坐标 $("#btn1").click(function (event) { // event 事件 console.log(event.offsetX..., event.offsetY); // 原点为事件元素的左上角 console.log(event.clientX, event.clientY); // 原点为窗口的左上角 console.log...动画描述 fadeln() 淡入 fadeOut() 淡出 fade To() 在指导时长内慢慢将透明度修改指定的值。

10.8K2 0

jQuery

阻止事件冒泡页面载入与window.onload的区别事件委托动画效果 jQuery jQuery封装了JS代码，使JS的编写更加简单，类似python的模块，在前端中叫“类库”，同时也兼容多个浏览器...文档处理事件动画效果插件 each、data、Ajax jQuery语法 $符号事jQuery中的重要标识 //在JS中可以通过获取先获取标签，然后去使用对应的方法，在jQuery中一样，...获取到的元素是DOM对象，那么在jQuery中获取到的元素属于jQuery对象，两者之间方法有差别，虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法...返回窗口的网页显示区域高度 jQuery 方法说明 offset() 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() 获取匹配元素相对父元素的偏移 scrollTop(...，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

6.7K1 0

jQuery(一)

://api.jquerymobile.com/ ps 该项目博客保留在2017年，提交截止在去年，测试状态不通过 https://travis-ci.org/jquery/jquery-mobile/...，在微软提供的在线测试进行测试 https://developer.microsoft.com/en-us/microsoft-edge/ 以及chrome官方提供的https://developers.google.com...栗子找到所有拥有details类的p元素，将其高亮显示， $('p.datails').css('background-color', 'yellow') jQuery()函数在Jquery中为最终要的为...$(document.body).append('List of Links'); // 将文档中的所有链接复制并插入该新div中...$('a').clone().appendTo('#linklist'); // clone不会复制事件处理程序 // 在每一个链接后插入元素，使其能独立显示 $("#linklist > a"

2.1K4 0

python_day15_前端_jQue

# 毗邻毗邻 script中添加 $('div+b').css('font-size','20px') ?...# 隔了一层或多层标签的邻居 xxx p3p3 毗邻 script中添加 $('div~b').css('...增加在已有块联标签的下边在标签外 // $(".increase").after($ele) $ele.insertAfter(".increase") ?...增加在已有块联标签的上边在标签外 // $(".increase").before($ele) $ele.insertBefore(".increase") ?...position // 相对于已经定位的父标签的偏移量 //给down增加一层测试position偏移量 js中增加 .donw_f {position: absolute;} <div class

6K2 0

jQuery基础

jQuery冲突问题使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$的使用权，还可以自定义一个符号来代替 $使用。...中each静态方法和map静态方法的区别 1.each静态方法默认的返回值就是，遍历谁就返回谁 map静态方法默认的返回值是一个空数组 2.each静态方法不支持在回调函数中对遍历的数组进行处理...map静态方法可以在回调函数中通过return对比那里的数组进行处理然后生成一个新的数组返回 ### 其他静态方法 1.$.isWindow():判断传入的对象是否是window...可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件为什么要事件委托新增的节点没有click响应,因为jQuery入口函数加载$("ul>li").click时没有把...中如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery 会遍历所有找到的元素，给所有找到的元素添加事件 */

1.7K2 0

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

input.blur( function(){ if( $.trim(input.val()) == '' ){ input.val(originalvalue); } }); } 在新窗口中打开链接...jQuery 1.4中，$.support 替换掉了$.browser 变量 $(document).ready(function() { // Target Firefox 2 and above...id=XY> }); 返回顶部按钮你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。...对象集合中 $(document).ready(function() { if ($('#id').length) { // do something } }); 使整个DIV可点击 $(...>home }); ID与Class之间转换当改变Window大小时，在ID与Class之间切换 $(document).ready(

4.4K1 0

造一个 react-infinite-scroller 轮子

这里直接给出计算 offset 的公式，免得大家去查了： const offset = 很长元素总高度 - 窗口距离顶部高度 - 窗口高度 = node.scrollHeight - parentNode.scrollTop...是一个只读属性，返回一个元素的布局高度 window.pageYOffset: 其实就是 scrollY 的别名，返回文档在垂直方向已滚动的像素值 window.innerHeight: 为浏览器窗口的视口的高度...上面公式里“当前窗口顶部与很长元素顶部的距离 + offsetHeigh”在页面里是定死的，而 window.pageYOffset - window.innerHeight 会随着滚动而改变，两者相减则为...mousewheel 事件在 Stackoverflow 这个帖子中说到：Chrome 下做无限滚动时可能存在加载时间变得超长的问题。...，resize 事件也应该触发加载更多在 mount 和 update 的时候添加 listener，在 unmounte 和 offset < threshold 时移除 listener。

2.5K3 0

pc 和 ipad 端网站适配

; html.style.fontSize = rem + "px"; //适用于PC网站 } else { var rem = 1400 * whdef...代码如下： // 导航内容 // css #float-nav-sticky-holder { width: 999999.99rem...chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。...兼容性问题及解决办法 ie10, ie9 无法兼容 display:flex flex布局浏览器兼容处理 ie8, ie9 flex布局浏览器兼容处理 ie8 ie9 IE9 IE10 IE11兼容性更改 ie9中使用

2.8K3 0

4-Jquery学习四-事件操作

jQuery 1.3 新增该函数，从jQuery 1.7开始被标记为已过时，在jQuery 1.9中被移除,请使用on()函数来替代。请使用on()函数来替代。 5，die 同上。...应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。...同样以初始HTML代码为例，我们可以编写如下jQuery代码： // 为div中的所有p元素绑定click事件处理程序 // 只有n2、n3可以触发该事件 $("div").on("click", "p...22，select select事件会在文本框中的文本内容被选中时触发。该事件仅适用于和文本框。...该事件仅适用于元素。

4.4K9 0

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

在新窗口中打开链接 XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid...检测浏览器注: 在版本jQuery 1.4中，.support 替换掉了.browser 变量 $(document).ready(function() { // Target Firefox 2 and...if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something...id=XY> }); 11.返回顶部按钮你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件 // Back to top $('a.top')...验证元素是否存在于jquery对象集合中 $(document).ready(function() { if ($('#id').length) { // do something

5.4K2 0

返回顶部的五种实现方法

div id="goTop">我在顶部我在顶部我在顶部 <!...minHeight = minHeight:minHeight = 600; 47 48 // 为窗口的scroll事件绑定处理函数 49 $(window...scrollTop(); 53 54 // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐 55 if(

5K2 0

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

在新窗口中打开链接 XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid...检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量 $(document).ready(function() { // Target Firefox...if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something... id=XY> }); 11.返回顶部按钮你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。...验证元素是否存在于jquery对象集合中 Simply test with the .length property if the element exists.

2.6K0 0

学习jQuery这一篇就够了

读取页面滚动条的 Y 坐标 (兼容 chrome 和 IE) var scrollTop = $(document.body).scrollTop()+$(document.documentElement...).scrollTop(); 设置页面滚动条滚动到指定位置 (兼容 chrome 和 IE) $('body,html').scrollTop(60); 需求描述：设置页面的高度为 2000px，设置滚动条的...() 方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。...console.log('浏览器滚动条改变了'); }); # 3.4.2 事件绑定 # 1. on() 方法描述：在选定的元素上绑定一个或多个事件处理函数。...需求描述：要求移除上一节中设置的事件委托，然后在分别点击 li 进行验证是否移除事件委托 1111 2222 3333</li

8105 0

JQuery语法：查找+操作

jquery的基础语法：$(selector).action() 即查找元素.操作一、查找元素（选择器和筛选器） 1.1 选择器 1.1.1 基本选择器 $("*")...>div") $(".outer+div") $(".outer~div") 1.1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even...$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked") 1.2 筛选器 1.2.1 过滤筛选器...pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop...],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

9796 0

Pbcms Ajax 无刷新加载内容

该系列会写一些 PbootCMS 在使用过程中碰到的一些问题，以及问题的解决方案。大家也可以给我反馈一些问题，有空的时候我会选一些写出来放在这个系列的教程里面。...由于 PbootCMS 的 api 接口的存在，在 PbootCMS 上实现 Ajax 加载还是比较方便的。一、点击更多按钮加载内容 1、首先，添加一个按钮用来触发事件。...var Dom = jQuery('.list'); //接下来写在点击按钮（'.more'）的时候触发事件 jQuery('#More').on('click', function(){ ...//使用jQuery的scroll()方法来监听页面滚动 jQuery(window).scroll(function(){ //当前窗口和页面顶部的距离 var WindowTop ...= jQuery(window).scrollTop(); //可视窗口区域高度 var WindowHeight = jQuery(window).outerHeight()

4.2K2 0

jQuery基础

click(function(){}) 事件委派： $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。...hover事件：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。...基于此,jquery在$.each里又加了一步: for(var i in obj){ ret=func(i,obj[i]) ;...用来在jQuery命名空间上增加新函数。 ...在jQuery命名空间上增加两个函数: jQuery.extend({ min: function(a, b) { return a < b ?

2.1K6 0

SCrollTOP scrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。...实际上，在js代码里，滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”（b），而是表示滚动条需要滚动的高度，即内部div的高度750px。...而scrollTop表示滚动条（一个点）当前的位置在750px里占了多少，不是图中标出的a。...和 FF 下测试通过代码解说：内部div高度为750，外部div高度为500，所以垂直滚动条需要滚动...程序中，在外部div的scroll（滚动）事件中侦测和执行if判断语句，是非常消耗CPU资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。

2.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭