May 11, 2024 | HTML
Hello Dev,
Occasionally, there's a need to set the scroll bottom as the default using jQuery. In the example below, you can observe the usage of `scrollHeight` to obtain the total height of a div with the `scroll` class and scroll functionality. Finally, the `animate` method is employed along with the `scrollTop` attribute to set it to the bottom. Essentially, when the page loads, it automatically scrolls to the bottom.
To automatically scroll to the bottom of a div when the page loads, you can use jQuery's scrollTop() method combined with the scrollHeight property of the target div. This approach ensures that the div scrolls to its maximum height, effectively reaching the bottom. Here's how you can implement it:
Read Also: How To Find Maximum Value Of Attribute in Jquery? index.php
<html lang="en">
<head>
<title>How to Set Scroll to Bottom in Jquery -- ItErrorSolution.com</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>How to Set Scroll to Bottom in Jquery -- ItErrorSolution.com</h1>
<div class="scroll-class" style="border: 1px solid black;height: 200px;overflow: scroll;width: 300px;">
<p>
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.
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Select the div and scroll to the bottom
$('.scroll-class').scrollTop($('.scroll-class')[0].scrollHeight);
});
</script>
</body>
</html>
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"