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.
The following is an indicator of what we are expected to achieve.
Scrolling a Div or any HTML element to the bottom can be applied in many scenarios, especially when creating 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.
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 animating the process for 1 second. This example will make our div to scroll to the bottom animatedly.
