如何在javascript中滚动到模态窗口的顶部

Question

我的要求是我需要将模态窗口显示为要由用户填充的表单.但是该模态的高度不应超过窗口大小.

因此,如果表单中的条目太多,则模态变为可滚动.问题是,在验证表单中的条目时,错误消息显示在第一个条目上方的模式顶部.如果用户位于最后一个属性,那么除非模态在错误事件上滚动到顶部,否则他不会知道发生了一些验证错误.

我试过了 :

$(window).scrollTop();
// and
$('#modalId').scrollTop();

这是模态代码:

<div class="modal hide" id="groupModal" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-header">
    </div>
    <div class="modal-body" style="max-height: 300px;">
        <div class="grpForm">
            <div class="alert alert-error hide">

                <span class="errMsg"></span>
            </div>
            <div class="alert alert-success hide">

                <span class="successMsg"></span>
            </div>
            <form class = "formFieldHolder" id="groupInfoForm"></form>
          </div>
    </div>
    <div class="modal-footer">
        <button class="btn cancelFormBtn" data-dismiss="modal" aria-hidden="true" msgkey="common.cancel.label"></button>
        <button class="btn btn-primary submitGroupFormBtn" type="submit" msgkey="common.submit.label"></button>     
    </div>
</div>

Answer 1

$('#modalId').scrollTop(0);

scrollTop()只返回值; scrollTop(0)将值设置为0(一直到顶部)

Answer 2

要将页面滚动到模态,请选择html, body并滚动到模态的偏移顶部

$("html, body").scrollTop($("#modalId").offset().top);

如果要将模态div滚动到顶部使用

$("#modalId").scrollTop(0);

关于jsFiddle的示例

如果需要,您可以将两者结合使用以将模式滚动到用户可见区域.

参考

• jQuery scrollTop
• jQuery偏移量

Answer 3

这是不使用JQuery的解决方案，首先通过id获得模态，然后，函数scrollIntoView将移动到所选元素（在本例中为模态）的顶部。

let element = document.getElementById('groupModal');    
element.scrollIntoView(true);