滚动到隐藏元素

Question

我有一个隐藏的输入字段，它在表格 td 中，当我选择选项 A 时，我希望浏览器滚动到那个可见的输入字段，它位于一个 table td 中。 我尝试了下面的代码，但是有些东西不正确。 输入字段的 ID: #id_a-1-host

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

页面可以向下滚动，但滚动的距离很短，没有滚动到输入框处。

- Tony

---

将id赋给td本身。 - Jai

嗨！给td赋予ID不起作用 ;(。 - Tony

@Jai 你不能通过给<td>元素提供id来导航... - Praveen Kumar Purushothaman

Answer 1

scrollTop属性基于元素的可见性，如果您将其隐藏（使用display: none），它将不在视口中可用，因此无法按预期工作。在这种情况下最好使用一个具名锚点。

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

甚至一个空的span也可以：

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

请确保此内容位于静态父级中。

另外，如果您已经设置了一个静态标题或其他内容，您还需要添加它的高度：

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

- Praveen Kumar Purushothaman

---

嗨！我在输入框上有name="id-a-off"，但它不是a标签或span。如果我使用staticHeaderHeight也没有任何区别。 - Tony

@Tony，你是如何使用staticHeaderHeight的？ - Praveen Kumar Purushothaman

@Tony staticHeaderHeight = $("header").height() 静态头部高度 = $（“header”）.height() - Praveen Kumar Purushothaman

哈哈哈... @Tony - Praveen Kumar Purushothaman

@Tony 好的，没问题。我会等待的。 - Praveen Kumar Purushothaman

Answer 2

你可以滚动到最近的可见元素。它会一直向上查找父级元素，直到找到一个可见元素。

提示：如果使用.closest()方法，它也会包括当前元素本身。

return $('html, body').animate({
    scrollTop: $(el).closest(':visible').offset().top
}, 400);

- Julesezaar