追加输入元素后offset().top返回值异常，如何修复滚动定位问题？

我太懂你踩的这个坑了——第一次点击添加后滚动完全正常，后面越点越跑偏，核心问题就是你用错了偏移量的计算维度！

问题根源 #

你当前用的$(".forms").last().offset().top是元素相对于整个文档顶部的距离，但.team-emails-inner是独立的滚动容器，它的scrollTop属性是基于容器自身内部顶部的偏移量。当容器已经滚动过一段距离后，文档级的offset值和容器内部的滚动偏移完全不匹配，导致后续滚动位置彻底出错。

解决方案 #

我们需要计算元素相对于滚动容器内部顶部的偏移，推荐两种可靠的修复方式：

方式1：使用jQuery的position()方法

position().top会返回元素相对于最近的定位父容器（这里就是.team-emails-inner，只要它的position不是static就行）的顶部偏移，结合容器当前的scrollTop可以精准定位：

$('#addAnother').click(function() { 
    // 缓存重复DOM查询，提升性能
    const $scrollContainer = $('#spaceTeammatesBox .team-emails-inner');
    const $forms = $scrollContainer.find('.forms');
    const singleFormHeight = $forms.first().innerHeight();
    const emails_length = $forms.length;

    // 优化原有高度计算逻辑
    let height_diff = Math.round($('.container-fluid').innerHeight() - $('nav').innerHeight() - $('#spaceTeammatesBox').innerHeight());
    const newFormHeight = (emails_length + 1) * singleFormHeight;
    if (height_diff > 180) {
        $scrollContainer.css('height', newFormHeight + 'px');
    }

    // 追加新输入框
    $forms.last().after(` 
    <div class="form-group forms"> 
    <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off"> 
    <span class="input-line" data-placeholder="Ex. name@example.com"></span> 
    </div> 
    `); 

    // 修复后的滚动逻辑
    const $lastForm = $scrollContainer.find('.forms').last();
    // 计算目标滚动位置：元素相对于容器的偏移 + 容器当前滚动位置 + 元素高度（确保完全可见）
    const scrollTarget = $lastForm.position().top + $scrollContainer.scrollTop() + singleFormHeight;
    $scrollContainer.animate({
        scrollTop: scrollTarget
    }, 1000); 
});

方式2：使用原生DOM的offsetTop属性

如果你的.team-emails-inner没有设置定位（position: static），position()可能会失效，这时候用原生的offsetTop更可靠，它直接返回元素相对于直接父容器的顶部偏移：

// 替换滚动部分的代码即可
const $lastForm = $scrollContainer.find('.forms').last();
$scrollContainer.animate({
    scrollTop: $lastForm[0].offsetTop + singleFormHeight
}, 1000);

额外优化建议 #

• 尽量缓存DOM查询结果（比如提前存好$scrollContainer、$forms），避免重复查找DOM，提升页面响应速度；
• 如果你不需要动态设置滚动容器的高度，可以考虑去掉高度计算逻辑，让容器自适应高度，滚动行为会更稳定。

内容的提问来源于stack exchange，提问作者H.Sdq