Animated! Scroll HTML Div to the Bottom Using JQuery

Ever wanted to scroll an HTML Div or any HTML element to the bottom? This article is going to demonstrate how you can animate scroll to the bottom of any HTML element using JQuery.

Following is an indicator of what we are expected to achieve.

View it on Giphy
Scrolling a Div or any HTML element to the bottom can be applied in many scenarios especially when create a Chatbox, for example, you would like users messages to be automatically scrolled to the bottom once a new message arrives or when sending a message.

To scroll a div or page to the bottom, we are going to use animate()  function and scrollHeight property of JQuery.

Example on How to Animate Scroll to the Bottom of Div  Using JQuery

The following code illustrates how to scroll div to the bottom using JQuery with animation effect.





  Animated! Scroll div to the bottom using JQuery 
  
  

  


  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The only code that’s required to scroll a div to the bottom is the following!

$(".my-div").animate({ scrollTop: $('.my-div').prop("scrollHeight")}, 1000);

Here we are telling the jquery scroll div to the bottom and animate the process for 1 second. This example will make our div to scroll to the bottom animatedly.

 

The post Animated! Scroll HTML Div to the Bottom Using JQuery appeared first on Hack Smile.

Author: BamDownload