Javascript 页面滚动jQuery功能不工作

迄今为止的实现是在用户单击按钮时创建一个支持子表单框。我无法让页面自动滚动到新创建的字段框（支持子表单框）。我正在使用这个流行的jQuery函数，因此当用户单击按钮时，页面将滚动到新创建的框：

function scroll()
        {
            $('html, body').animate({
                scrollTop: $('#js-section').offset().top
            }, 200);
        }

添加框/字段的按钮：

<div class="input-group-btn">
     <button class="btn btn-success" type="button" onclick="add_fields(); scroll()"> Add another operator </button>
</div>

添加另一个操作符

这就是我创建新框/字段的方式

function add_fields() {
            room++;
            var objTo = document.getElementById('name_fields');
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "form-group removeclass"+room);
            var rdiv = 'removeclass'+room;
            divtest.innerHTML = '<h5 class="support-subform-label" style="text-align: left;">Equipment Operator(s) </h5> <div class="support-subform-box" id="js-section"> <label id="first_name-group" for="first_name" class="small-12 medium-6" style="text-align: left; float: left;"> First Name {{ form.first_name }} </label><label id="last_name-group" for="last_name" class="small-12 medium-6" style="text-align: left; float: right;"> Last Name {{ form.last_name }} </label><label for="email" style="text-align: left;"> Email {{ form.email }} </label><label id="phone-number-group" for="phone-number" class="small-12 medium-7" style="text-align: left; float: left;"> Phone Number {{ form.phone.number }} </label><label id="phone-extension-group" for="phone-extension" class="small-12 medium-5" style="text-align: left; float: left;"> ext {{ form.phone.extension }} </label><label class="small-12" style="text-align: left;"> Title {{ form.position }} </label> <br> <div class="input-group-btn"> <button class="btn btn-success" type="button" onclick="remove_fields('+ room +');"> Remove </button> </div> </div>';

            objTo.appendChild(divtest)
        }

函数添加_字段（）{
房间++；
var objTo=document.getElementById（'name_fields'）；
var divtest=document.createElement（“div”）；
setAttribute（“类”、“窗体组removeclass”+房间）；
var rdiv='removeclass'+房间；
divtest.innerHTML='设备操作员姓名{{form.First_Name}姓氏{{form.Last_Name}}电子邮件{form.Email}电话号码{{form.Phone.Number}分机{form.Phone.extension}标题{{form form.position}
删除'；
对象追加子对象（divtest）
}

---

仅供参考：我正在使用Jinja2/Flask

对添加该函数的每一行使用索引可能是个好主意

function add_fields() {
        room++; /* Using this index to indefy the #js-section id on scroll function*/
        var objTo = document.getElementById('name_fields');
        var divtest = document.createElement("div");
        divtest.setAttribute("class", "form-group removeclass"+room);
        var rdiv = 'removeclass'+room;
        divtest.innerHTML = '<h5 class="support-subform-label" style="text-align: left;">Equipment Operator(s) </h5> <div class="support-subform-box" id="js-section'+ room +'"> <label id="first_name-group" for="first_name" class="small-12 medium-6" style="text-align: left; float: left;"> First Name {{ form.first_name }} </label><label id="last_name-group" for="last_name" class="small-12 medium-6" style="text-align: left; float: right;"> Last Name {{ form.last_name }} </label><label for="email" style="text-align: left;"> Email {{ form.email }} </label><label id="phone-number-group" for="phone-number" class="small-12 medium-7" style="text-align: left; float: left;"> Phone Number {{ form.phone.number }} </label><label id="phone-extension-group" for="phone-extension" class="small-12 medium-5" style="text-align: left; float: left;"> ext {{ form.phone.extension }} </label><label class="small-12" style="text-align: left;"> Title {{ form.position }} </label> <br> <div class="input-group-btn"> <button class="btn btn-success" type="button" onclick="remove_fields('+ room +');"> Remove </button> </div> </div>';

        objTo.appendChild(divtest)
        scroll(room);
    }

最后，您只能从HTML调用add_字段

<div class="input-group-btn">
 <button class="btn btn-success" type="button" onclick="add_fields();"> Add another operator </button>

添加另一个操作符

<div class="input-group-btn">
 <button class="btn btn-success" type="button" onclick="add_fields();"> Add another operator </button>