Scroll to hidden element

Question

I have a hidden input field, inside a table td, and when I select option A I want the browser to scroll down to that visible input that is inside a table td. I have tried code bellow, but something is not working correct. ID of the input field: #id_a-1-host

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

It scrolls down but only a little bit. It is not scrolling down to the input field.

Answer 1

The scrollTop is based on the visibility and if you have it hidden, using display: none, it is not available in the viewport, so it won't work as expected. It is always better to use a named anchor in these cases:

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

Or even an empty span will do:

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

Make sure this is in a static parent.

Also, if you have a static header or something set up, you need to add that height as well:

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