How to scroll down the page when a covered input box is focused?

Take a look at this page.

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.

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 "jus开发者_如何学编程t enough" to bring them to a visible spot.

Is there a clean way to do this?

Edit: my solution seems to work except for browser zoom. Try it at zoom 144% for example. Any ideas on how to fix?

element.scrollIntoView();

supported in all mayor browsers ie-6-7-8-9-10 firefox, webkit

or:

element.focus(); element.blur();

Here is a solution by a friend of mine.

Seems to work well across browsers.

There still is one minor annoyance that the element has a larger border when selected, and part of that enlarged bordered remains hidden. I could always just add an extra pixel or two to the scroll, but I'm sure there must be a more elegant solution.

Ripper234's solution worked well for me. The following solution is for anyone whose field is covered by an element above it (such as a fixed nav) rather than below it.

I've also animated it using jQuery and added a padding variable which is useful if you have a label above the field that you want to show, or want to center the field (just set padding to half of screen height).

var navHeight = 200;
var padding = 25;
$('input').on('focus', function() {
  try {
    var elemTop = $(this).offset().top;
    var maxVisible = $(document).scrollTop() + navHeight;
    if (elemTop < maxVisible) {
      $("html, body").animate({ scrollTop: elemTop - navHeight - padding }, 250);  
    } 
  } catch (e) {
    console.log("Error: " + e);
  }
});

What if you add an onfocus handler on each textbox and verify whether their position is too close/far to the "bottom-box" element and when so you change the position of this div element accordingly (move it down/up).

I would just use Z-index to pop the focused input above the fixed div

I don't think there is any common way of moving the screen down, maybe I'm wrong..

perhaps you can do it with in-page links like this as they are designed to pull the screen down, use JQuery to say "when this input is in focus go to the corresponding anchor point"

<a href="#box5"><input type="text" /></a>