点击加号新建行后如何实现页面自动上移以完整显示jQuery提示及按钮

解决方案 #

可以通过元素滚动定位的方式实现需求，以下提供两种常用实现方案：

方案1：原生JS实现（兼容性好，推荐）

在新行插入DOM完成后，调用DOM元素内置的scrollIntoView方法即可：

// newRow为你刚生成的新行DOM节点
newRow.scrollIntoView({
  behavior: 'smooth', // 可选，添加后会有平滑滚动效果，不需要可删除
  block: 'start' // 让新行顶部对齐可视区域顶部，预留足够空间展示下方元素
})

方案2：jQuery动画滚动实现

如果你项目中已经大量使用jQuery的动画逻辑，可以用偏移量计算的方式实现：

// $newRow为新行的jQuery对象
$('html, body').animate({
  scrollTop: $newRow.offset().top - 20 // 减20是为了顶部预留少量边距，可自行调整数值
}, 300) // 300为滚动动画时长，单位为毫秒，不需要动画可直接给scrollTop赋值

注意事项 #

1. 滚动逻辑必须在新行完全插入DOM、渲染完成后调用，否则会出现定位偏差
2. 如果自动提示下拉框高度较高，可以调整滚动的偏移量，多预留部分高度避免下拉框被截断
3. 如果是容器内局部滚动，需要把滚动对象从html, body替换为对应的滚动容器元素

内容的提问来源于stack exchange，提问作者A. Chithrai