How to scroll to an element within a modal using jquery?

Question

I have an opened modal that I insert elements into line by line. Each line has it's own ID tag. Currently as the the list grows bigger than the modal window the text just gets hidden at the bottom of the modal window. You can manually use the scroll bar but I would like the text to scroll up in the modal window as they printed.

I have played around with the following code but that just scrolls the webpage behind the modal. I have also tried replacing 'html, body' with modal elements to no avail.

$('html, body').animate({ scrollTop: $('#Element').offset().top }, 500);

I'm sure I close. Any suggestions?

thanks

Answer 1

It looks like you are calling the animate method on html and body.

$('html, body').animate(...);

If you want to scroll the modals window you have to call the animate method on that element instead.

$('#modal').animate(...);

Where #modal is the element containing the elements you've created.

edit:

I see that you tried to call animate on the modal. Here is a fiddle that scrolls elements in a modal when you click the button.

also in the code you have a closing bracket after #Element which is causing the script to error: ...scrollTop: $('#Element'])...

Answer 2

If you want to see the contents that are getting hidden you can add a CSS style to the DIV to handle the overflow. This will automatically create a vertical scroll bar for you once the content exceeds the view area of DIV.

$("#someDivID").css("overflow","auto");

All of the properties can be referenced at the URL below.

http://www.w3schools.com/cssref/pr_pos_overflow.asp

Hope that helps!

Answer 3

If you want to use this with a Bootstrap Modal be sure to use

$("#modalcontent").animate(...);

because it's the modal content that has the scroll bars.

Also useful might be the use of a placeholder after the content you want to show. Consider this: You have a modal and at the very end you have a button, e.g. to submit a form inside your modal. After the submission is completed you might want to show a confirmation or an error within the modal. Because the message you want to show shouldn't be placed within your form you might want to place it under the button. BUT if your modal alread has scrollbars it doesn't scroll automatically when showing your message, e.g. with a Bootstrap alert. That's because the solutions above reference the top corner of your message. To resolve this you can add an offset to your position like

$("#modalcontent").animate({scrollTop: $('#messagebox').offset().top + offset}, 200);

or you can add a placeholder right below your alert.

$("#modalcontent").animate({scrollTop: $('#placeholder').offset().top}, 200);

And sometimes it's apropriate to combine these two options, e.g. when you have other alerts inside your form which still are visible when you show the submission message.