How to scroll down the page when a covered input box is focused?
<p>Take a look at <a href="http://jsbin.com/aheqim/3" rel="nofollow">this page</a>.</p>

<p>I have a page with a lower 'floating' fixed-position div that's covering some portion of the screen bottom of the screen, with a high z-index, and a bunch of input boxes.</p>

<p>The problem is that when one of the lower input boxes are focused, by pressing TAB, their content is partly hidden by the div. I would like to detect when lower input boxes are focused, and scroll the page down "just enough" to bring them to a visible spot.</p>

<p>Is there a clean way to do this?</p>

<p><strong>Edit</strong>: <a href="http://stackoverflow.com/questions/7650892/how-to-scroll-down-the-page-when-a-covered-input-box-is-focused/7659021#7659021">my solution</a> seems to work except for browser zoom. Try it at zoom 144% for example. Any ideas on how to fix?</p>
