How to scroll to an element within a modal using j

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

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 2

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'])...