Scroll a Div to bottom using Jquery Animate

Posted By : Gaurav Arora | 13-Apr-2017

jquery

Hi, as we all know that normally in every app, we use scroll to top kind of functions. But In some cases there is a requirement when we have to scroll to div’s bottom content.

Let’s take an example of Chat Box Plugin.

In chat box whenever you send a message the message list scrolls up or we can say that the list scrolls to the last message which is at the bottom. How can we do that? Because normally we use scrollto top instead of scroll to bottom.

We can do the same with the help of Jquery’s Animate and scrollHeight.

First of all we will start by creating our HTML structure for chat list.



	Lorem Ipsum is simply dummy text of the printing and typesetting industry
	Lorem Ipsum is simply dummy text of the printing and typesetting industry
	Lorem Ipsum is simply dummy text of the printing and typesetting industry
	Lorem Ipsum is simply dummy text of the printing and typesetting industry
	Lorem Ipsum is simply dummy text of the printing and typesetting industry

Now our requirement is that the user should the see the last message when he click on button.

For this we will use jquery’s animate function to scroll our list everytime when the user click on the button. So that the user can see the recent message as the message list will automatically scrolls up after clicking on button.

Now we will use jquery’s animate and scrollHeight :

 $(function(){
	    $("#submit").click(function(){
	    	$('#scrollChat').animate({
	    		scrollTop: $('#scrollChat')[0].scrollHeight}, "slow");
	    });
    });

With the help of above function, every time when the user will click on the button, the list will scroll to the last list item.

In this way we can make our chat box list scroll to bottom using jquery animate and scrollHeight.