Control HTML5 validation balloon scroll?

Question

I am working on a form with Twitter Bootstrap that uses the fixed on top nav menu (scrolls with page, but stays fixed on the top of it) and http://reactiveraven.github.com/jqBootstrapValidation/ for simple form validation styling.

However, the problem I am running into, is that when a validation balloon pops up saying to "Please fill out this field", the browser is scrolled up to where the input box is at the very top of the page. Under normal conditions, this is fine, however due to my menu setup it is hidden. Is there any way I can take over this scrolling and add an offset to it to prevent this from occuring?

Answer 1

I'm working with the exact same setup and I've found that there's no easy way to do this with the form element. My hack was to watch for an invalid input/select/textarea and then have something fire from that. This isn't the best fix, especially with a lot of invalid inputs, but it helped me out with what I needed. Hopefully someone else will come by and be able to clean it up a bit.

function scrollToInvalid() {
  // Height of your nav bar plus a bottom margin
  var navHeight = 60;
  // Offset of the first input element minus your nav height
  var invalid_el = $('input:invalid').first().offset().top - navHeight;

  // If the invalid element is already within the window view, return true. If you return false, the validation will stop.
  if ( invalid_el > (window.pageYOffset - navHeight) && invalid_el < (window.pageYOffset + window.innerHeight - navHeight) ) {
    return true;
  } else {
    // If the first invalid input is not within the current view, scroll to it.
    $('html, body').scrollTop(invalid_el);
  }
}

$('input').on('invalid', scrollToInvalid);

Answer 2

This can be done with simple css on the html element

html {
  scroll-padding-top: 100px;
}

Use scroll-padding-bottom: 100px; similarly if you have sticky footer

Works on all modern browsers except off course IE See here for more info https://css-tricks.com/almanac/properties/s/scroll-padding/