27

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

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

我努力了 ：

$(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>
4

6 回答 6

28

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

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

于 2013-06-04T05:25:52.417 回答
13

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

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

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

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

jsFiddle 上的示例

如果需要，您可以结合使用将页面和模式滚动到用户的可见区域。

参考

于 2013-06-04T05:25:59.897 回答
8

这是一个不使用 JQuery 的解决方案，首先您通过 id 获取模态，然后，函数scrollIntoView将移动到您选择的元素的顶部，在这种情况下是您的模态。

let element = document.getElementById('groupModal');    
element.scrollIntoView(true);
于 2017-10-04T05:51:22.997 回答
1 
 <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>
于 2014-02-15T05:32:15.583 回答
1

To avoid rough movement to the top I would prefer to use (animated movement):

$('#modalId').animate({
        scrollTop : 0
    }, 'slow');
于 2018-02-22T15:10:16.283 回答
-1

You have to include "jquery-1.7.1.min.js" file in your page. http://code.jquery.com/jquery-1.7.1.min.js

于 2014-02-15T05:39:46.037 回答