指定滚动动画以在jquery中聚焦

Question

我有以下代码，重点关注具有验证错误的输入字段。我想添加某种动画，滚动到焦点位置（所以如果你点击提交它“滚动到第一个输入字段验证失败的地方）。

有什么想法吗？

 if(validation_failed == true) {
      $(selected_form).find(":input.validator_element_error:visible:enabled").first().focus();
            return false;
        }

Answer 1

您可以在应用焦点之前为scrollTop设置动画。这可以从您的示例中简化。

$('html,body').animate({scrollTop: $('input').offset().top}, 200, function() {
    $('input').focus();
});

jsfiddle

在您的特定情况下，我会想象您只需要按照您希望的方式选择错误的输入元素，然后将上述代码中的$('input')替换为您选择的元素。

var errorInput = $(selected_form).find(":input.validator_element_error:visible:enabled").first();
$('html,body').animate({scrollTop: errorInput.offset().top}, 200, function() {
    errorInput.focus();
});