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

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?



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.


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


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

Need Your Help

Is it possible to set Images in a Viewpager with a if or switch?

android if-statement android-viewpager switch-statement android-imageview

I have a ViewPager with a TextView and an ImageView. For the TextView I have a String[] which contains dynamically added Strings and currently just a int[] for the ImageView.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.