如何在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);

Answer 4

 <script type="text/javascript">
            $(document).ready(function(){ 
            $('.scroll_top').hide();
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('.scroll_top').fadeIn();
                } else {
                    $('.scroll_top').fadeOut();
                }
            }); 

            $('.scroll_top').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 500);
                return false;
            });

        });
</script>

Answer 5

为了避免粗暴移动到顶部，我宁愿使用（动画运动）：

$('#modalId').animate({
        scrollTop : 0
    }, 'slow');

Answer 6

您必须在页面中包含“jquery-1.7.1.min.js”文件。 http://code.jquery.com/jquery-1.7.1.min.js