How to scroll to the top of a modal window in javascript

Question

My requirement is that I need to show a modal window as a form to be filled by user. But the height of that modal should be not more then window size.

So if the entries in form are too much then the modal becomes scrollable. The problem is that while validating the entries in the form the error message is shown at the top of the modal above the first entry. If user is at last property then he will not be knowing that some validation error had occurred unless the modal is scrolled to top on the error event.

I have tried :

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

this is the modal code:

<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() only returns the value; scrollTop(0) sets the value to 0 (all the way to the top)

Answer 2

To scroll the page to the modal, select html, body and scroll to the offset top of the modal

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

If you want to scroll the modal div to the top use

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

Example on jsFiddle

You can combine both to scroll the page and the modal to a visible area for the user if needed.

References

• jQuery scrollTop
• jQuery offset

Answer 3

This is a solution without using JQuery, first you get your modal by the id and then, the function scrollIntoView will move to the top of the element you selected, in this case your modal.

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

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

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

Answer 6

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