使用jQuery scrollTop滚动到目标位置不准确问题求助

问题根源 #

你遇到的核心问题是选错了滚动容器。因为“Règlement”是标签页结构，实际的滚动区域不是全局的html/body，而是标签页内部的.pabcontenu容器——而你之前可能一直操作的是窗口对象，导致scrollTop()始终返回0，滚动定位逻辑完全错误。

移除#contexte后正常，大概率是这个div的样式（比如overflow、定位属性）干扰了滚动容器的识别，让原本的错误代码“碰巧”生效了。

解决步骤 #

1. 确认正确的滚动容器
   打开浏览器控制台，切换到“Règlement”标签页，手动滚动一段距离后执行：

   $('.pabcontenu').scrollTop()
   

   如果返回值大于0，说明这个就是你要操作的滚动容器。

2. 修改滚动代码
   把原来针对窗口的滚动逻辑，改成针对.pabcontenu的操作：

   $('button').click(function() {
       // 获取滚动容器
       const scrollContainer = $('.pabcontenu');
       // 计算目标元素相对于容器的滚动位置
       const targetEl = $('#你要定位的h4的ID');
       const targetOffset = targetEl.offset().top - scrollContainer.offset().top + scrollContainer.scrollTop();
       // 执行滚动
       scrollContainer.scrollTop(targetOffset);
   });
   

   原理：offset().top是元素相对于文档顶部的坐标，减去容器自身相对于文档顶部的坐标，再加上容器当前的滚动距离，就能得到目标元素在容器内部的滚动偏移量，这样定位绝对准确。

3. 额外样式检查

   • 确保.pabcontenu设置了overflow-y: auto或overflow-y: scroll，否则它不会成为独立的滚动容器，滚动事件还是会冒泡到窗口。
   • 检查#contexte的CSS，避免它设置position: fixed/absolute导致布局偏移，影响offset坐标的计算。

内容的提问来源于stack exchange，提问作者amy