jquery - 控制 HTML5 验证气球滚动？

Question

我正在使用 Twitter Bootstrap 开发一个表单，该表单使用固定的顶部导航菜单(随页面滚动，但固定在其顶部)和 http://reactiveraven.github.com/jqBootstrapValidation/用于简单的表单验证样式。

但是，我遇到的问题是，当弹出验证气球说“请填写此字段”时，浏览器向上滚动到页面最顶部的输入框。在正常情况下，这很好，但是由于我的菜单设置，它被隐藏了。有什么方法可以接管此滚动并为其添加偏移量以防止发生这种情况？

Answer 1

我正在使用完全相同的设置，但我发现没有简单的方法可以使用 form 元素来完成此操作。我的 hack 是观察无效的 input/select/textarea 然后从中触发一些东西。这不是最好的解决方法，尤其是在有很多无效输入的情况下，但它帮助我解决了我需要的问题。希望其他人会过来并能够稍微清理一下。

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);