如何在多次克隆表单时使用 javascript 或 jquery 自动滚动到聚焦的输入字段分区

Question

自动滚动到聚焦的输入字段表单分区。 我正在克隆表单以一次性添加更多用户。 因此，当我单击添加按钮时，它必须向下滚动到输入字段

HTML：

 $(document).ready(function() { $('#id_i_fa_add').click(function duplicate() { $('#id_i_fa_add').off('click'); $('.fa.fa-trash').off('click'); var original = document.getElementById('id_div_add' + i); var clone = original.cloneNode(true); $('#' + clone.id + " ai").attr('class', 'fa fa-trash'); $('#' + clone.id + " ai").attr('id', 'id_i_fa_del' + i); clone.id = "id_div_add" + ++i; clone.querySelectorAll("[id = 'id_span_error_email" + (i - 1) + "']")[0].id = 'id_span_error_email' + i; $(clone).find('input').val(""); $(clone).find('span').text(""); document.getElementById('id_form_append').appendChild(clone); $('#id_form_append input').focus(); $('#id_i_fa_add').on('click', duplicate); $('.fa.fa-trash').on('click', duplicate_trash); }); }); function duplicate_trash() { var trash_id = this.id; var parent_trash_id = $('#' + trash_id).parents().eq(1).attr('id'); $('#' + parent_trash_id).remove() }

 <form id='id_form_append' action="#"> <div id='id_div_append'> <div id='id_div_add0' class="panel_box"> <div class="form_group"> <label>Email Address</label> <div class="form-group form-inline"> <div class="input-group" style="width: 100%;"> <input name="email" type="text" class="form-control" placeholder="e-mail" autofocus> <div class="input-group-addon">domains</div> </div> </div> <span id='id_span_error_email0' class='class_span0'></span> </div> <a class="action" href="#"> <i id='id_i_fa_add' class="fa fa-plus"></i> </a> </div> </div> </form>

Answer 1

您可以使用以下方法滚动到一个位置：

$(window).scrollTop(/* pixel count */)

要检索任何元素的位置，请使用：

$(/* selector */).position()

然后，您就有了一个包含所选元素位置的简单对象。 要将像素检索到顶部，请使用：

$(/* selector */).position().top

注意：这只有在您的选择器只选择一个元素时才能正常工作。