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.
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.
<!DOCTYPE html>
<html>
<head>
<title>Animated! Scroll div to the bottom using JQuery </title>
<script src="jquery.js"></script>
<script>
$(function(){
$("#scroll-div-button").click(function(){
$(".my-div").animate({ scrollTop: $('.my-div').prop("scrollHeight")}, 1000);
});
});
</script>
<style>
body{
padding: 20px;
}
.my-div{
height: 300px;
width: 300px;
overflow-y: scroll;
margin: 0 auto;
border: 1px solid #e1e1e1;
border-radius: 3px;
padding: 10px;
}
button{
margin: 0 auto;
display: block;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="my-div">
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.<br /><br/>
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.<br /><br />
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.<br /><br />
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.
</div>
<button id='scroll-div-button'>Click Here to Scroll This Div to Bottom</button>
</body>
</html>
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.
