Как прокручивать верхнюю часть модального окна в javascript

Мое требование состоит в том, что мне нужно показать модальное окно как форму, которую должен заполнить пользователь. Но высота этого модала должна быть не больше размера окна.

Итак, если записи в форме слишком много, то модальная становится прокручиваемой. Проблема в том, что при проверке записей в форме сообщение об ошибке отображается в верхней части модальности над первой записью. Если пользователь находится в конечном итоге, тогда он не будет знать, что произошла ошибка проверки, если модальное значение прокручивается вверху события ошибки.

Я пробовал:

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

Ответы

Ответ 1

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

scrollTop() возвращает значение; scrollTop(0) устанавливает значение 0 (вплоть до вершины)

Ответ 2

Чтобы прокрутить страницу до модального, выберите html, body и выделите верхнюю часть смещения модального

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

Если вы хотите прокрутить модальный div до верхнего уровня

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

Пример jsFiddle

Вы можете комбинировать оба для прокрутки страницы и модального изображения к видимой области для пользователя, если это необходимо.

Ссылки

Ответ 3

Это решение без использования JQuery: сначала вы получаете ваш модал по идентификатору, а затем функция scrollIntoView переместится в верхнюю часть выбранного вами элемента, в данном случае ваш модальный.

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

Ответ 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>

Ответ 5

Чтобы избежать грубого движения к вершине, я бы предпочел использовать (анимированное движение):

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