Question

到目前为止，实现是在用户单击按钮时创建的support-subform-box。我无法让页面自动滚动到新创建的字段框（support-subform-box）。我正在使用这个流行的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)
        }

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

Answer 1

对于使用函数

添加的每个新行使用索引可能是个好主意

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

另外，你可以在add_fields（）函数的末尾调用scroll函数并给出索引以使选择器获得特定的id

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

最后，您只需从HTML

调用add_fields

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

页面滚动jQuery功能无法正常工作

1 个答案: