jquery - 滚动到隐藏元素

Question

我在表 td 内有一个隐藏的输入字段，当我选择选项 A 时，我希望浏览器向下滚动到 表 td 内的可见输入。我已经尝试过下面的代码，但有些东西无法正常工作。输入字段的ID:#id_a-1-host

jQuery('html,body').animate({scrollTop: jQuery('#id_a-1-host').offset().top},'slow');

它会向下滚动，但只滚动一点点。它没有向下滚动到输入字段。

Answer 1

scrollTop 基于可见性，如果您使用 display: none 将其隐藏，则它在视口(viewport)中不可用，因此无法工作正如预期的那样。在这些情况下，最好使用命名 anchor :

<a name="id-a-off" id="id-a-off">

或者甚至一个空的跨度也可以:

<span name="id-a-off" id="id-a-off"></span>

确保它位于静态父级中。

此外，如果您设置了静态 header 或其他内容，则还需要添加该高度:

jQuery('html,body').animate({
  scrollTop: jQuery('#id_a-1-host').offset().top - staticHeaderHeight
}, 'slow');