CODEWITHSUNDEEP
javascriptjquery
kavinder
kavinder

Reputation: 609

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

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>

Upvotes: 29

Views: 57923

Answers (7)

Georgios Syngouroglou
Georgios Syngouroglou

Reputation: 19944

You may also use the scrollTo method, like the example below:

document.querySelector(".modal-body").scrollTo(0, 0);

Upvotes: 0

pampa pal
pampa pal

Reputation: 151

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);

Upvotes: 14

Ignacio Ara
Ignacio Ara

Reputation: 2582

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

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

Upvotes: 2

Satish N
Satish N

Reputation: 95

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

Upvotes: -1

Satish N
Satish N

Reputation: 95

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

Upvotes: 1

Tom
Tom

Reputation: 4582

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

scrollTop() only returns the value; scrollTop(0) sets the value to 0 (all the way to the top)

Upvotes: 31

BrunoLM
BrunoLM

Reputation: 100312

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

Upvotes: 13

Related Questions