如何使用jQuery将滚动位置移至前置元素底部？

我正在寻找一种方法，将滚动位置移至HTML中已前置元素的底部。以下是我用于前置数据的代码：

var id = '#posts'+(yy-2);
$.get('page-'+(yy-1) , function(data){
     var content = $(data).find(id);
     $('#container').prepend(content);                           
});

我需要将滚动位置移至content元素下方，尝试添加以下代码但没有效果：

$('html, body').scrollTop('#posts'+(yy-1));

你的代码无效的核心原因是：scrollTop()方法接收的是像素数值，而不是选择器字符串。要实现滚动到前置元素的底部，需要先计算该元素底部对应的页面滚动像素值，再传入scrollTop()。

修改后的代码如下：

var id = '#posts'+(yy-2);
$.get('page-'+(yy-1) , function(data){
     var content = $(data).find(id);
     $('#container').prepend(content);
     // 计算元素底部的滚动位置：元素顶部偏移 + 元素实际占据高度（含边距、边框）
     var targetScrollPos = content.offset().top + content.outerHeight(true);
     $('html, body').scrollTop(targetScrollPos);
});

补充说明 #

• 使用outerHeight(true)而非height()，是因为前者会包含元素的内边距、外边距和边框，确保计算的是元素在页面中实际占据的高度，避免滚动位置出现偏差
• 如果页面存在固定定位的导航栏或其他顶部固定元素，需要额外减去该元素的高度，才能让目标位置刚好出现在可视区域的正确位置

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