Scroll to Bottom of a Div in JavaScript

Scroll to Bottom of a Div in JavaScript

  1. Use scrollTop and scrollHeight to Scroll to the Bottom of Div in JavaScript
  2. Use jQuery to Scroll to the Bottom of Div in JavaScript
  3. Use jQuery .animate() to Scroll to Bottom of Div in JavaScript
  4. Use element.scroll() to Scroll to Bottom of Div in JavaScript
  5. Use element.scrollintoview() to Scroll to Bottom of Div in JavaScript

This article will teach you how to scroll to the bottom of a div using the following methods.

  1. Scroll to bottom with scrollTop and scrollHeight.
  2. Scroll to bottom with jQuery.
  3. Scroll to bottom with jQuery .animate().
  4. Scroll to bottom with Element.scroll().
  5. Scroll to bottom with Element.scrollIntoView().

Use scrollTop and scrollHeight to Scroll to the Bottom of Div in JavaScript

A combination of scrollTop and scrollHeight can cause an element to scroll to the bottom because scrollTop determines the number of pixels for a vertical scroll. In contrast, scrollHeight is the element’s height (visible and non-visible parts).

Therefore, for an element, when scrollTop equals scrollHeight, the browser scrolls up. This allows seeing the bottom of the element.

However, this method requires that the element should be scrollable. You can achieve this when the element has a child element that causes a vertical overflow.

Meanwhile, you can control the overflow with overflow-y: scroll. This means that without overflow-y: scroll, this method will not work.

For example, in the next code block, the HTML element with an ID of scroll-to-bottom has a height of 300 pixels. Meanwhile, the child element has a height of 400 pixels.

As a result, the child element causes an overflow in its parent element. However, we’ve controlled the overflow with overflow-y: scroll in the CSS.

<head>
	<meta charset="utf-8">
	<title>Scroll to bottom - 1 (scrollTop and scrollHeight)</title>
	<style type="text/css">
		#scroll-to-bottom {
			border: 5px solid #1a1a1a;
			padding: 2em;
			width: 50%;
			margin: 0 auto;
			height: 300px;
			overflow-y: scroll;
		}
		.content {
			height: 400px;
		}

		p {
			font-size: 100px;
		}
	</style>
</head>
<body>
	<div id="scroll-to-bottom">
		<div class="content">
			<p>This is a dummy text</p>
		</div>
	</div>
	<script>
		let scroll_to_bottom = document.getElementById('scroll-to-bottom');
		scroll_to_bottom.scrollTop = scroll_to_bottom.scrollHeight;
	</script>
</body>

Output:

Scroll to bottom with scrollTop and scrollHeight

Use jQuery to Scroll to the Bottom of Div in JavaScript

jQuery defines an API called scrollTop that will get or set the vertical position of a scroll bar. The scroll bar in question will be for a set of matched elements.

When used with the element’s scrollHeight, you can scroll to the bottom of the element.

We’ve selected an element with the jQuery selector in the next code. At the same time, we’ve used the element scrollTop to select the element and its scrollHeight.

You’ll note from the code that we’ve used [0] to get the DOM element. As a result, when you load the code in your web browser, the div will scroll to the bottom.

What’s more, in the JavaScript code, we’ve provided variants of this approach. However, we’ve left them as comments.

As a final note, this approach also requires that the element be scrollable.

<head>
	<meta charset="utf-8">
	<title>Scroll to bottom - 2 (jQuery)</title>
	<style type="text/css">
		#scroll-to-bottom {
			border: 5px solid #1a1a1a;
			padding: 2em;
			width: 50%;
			margin: 0 auto;
			height: 300px;
			overflow-y: scroll;
		}
		.content {
			height: 400px;
		}

		p {
			font-size: 100px;
		}
	</style>
</head>
<body>
	<div id="scroll-to-bottom">
		<div class="content">
			<p>This is a dummy text</p>
		</div>
	</div>

	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
		integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
		crossorigin="anonymous"
		referrerpolicy="no-referrer"
	>
	</script>
	<script>
		$('#scroll-to-bottom').scrollTop($('#scroll-to-bottom')[0].scrollHeight);

        // The following code do the same thing:
        // $('#scroll-to-bottom').scrollTop(function() {
		// 	return this.scrollHeight;
		// });

		// let scroll_to_bottom = $("#scroll-to-bottom");
		// scroll_to_bottom.scrollTop(scroll_to_bottom.prop("scrollHeight"));
	</script>
</body>

Output:

Scroll to bottom with jQuery

Use jQuery .animate() to Scroll to Bottom of Div in JavaScript

The jQuery .animate() API allows you to perform custom animation on CSS properties. Therefore, you can create a smooth scroll effect.

What we mean by “smooth” is that the scroll to bottom effect will appeal to the users. However, you’ll need scrollTop and scrollHeight to pull this off.

We aim to keep the code clean because we use the .animate() API. So, we’ll wrap all our code in a function.

The inner working of the function is as follows:

  1. Get the element’s ID using the jQuery selector.
  2. Attach the .animate() API to this element.
  3. Pass an object as the first argument of the .animate() API. In this object, do the following:
    1. Create an object property whose name is scrollTop.
    2. Set scrollTop value to element.prop("scrollHeight").
  4. Set the second argument of the .animate() API as the animation duration.

Afterward, we call this function on the element’s HTML ID. Meanwhile, the element should be scrollable with CSS overflow-y: scroll.

<head>
	<meta charset="utf-8">
	<title>Scroll to bottom - 3 (jQuery smooth)</title>
	<style type="text/css">
		#scroll-to-bottom {
			border: 5px solid #1a1a1a;
			padding: 2em;
			width: 50%;
			margin: 0 auto;
			height: 300px;
			overflow-y: scroll;
		}
		.content {
			height: 400px;
		}

		p {
			font-size: 100px;
		}
	</style>
</head>
<body>
	<div id="scroll-to-bottom">
		<div class="content">
			<p>This is a dummy text</p>
		</div>
	</div>

	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
		integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
		crossorigin="anonymous"
		referrerpolicy="no-referrer"
	>
	</script>
	<script>
		const smoothScroll = (id) => {
			const element = $(`#${id}`);
			element.stop().animate({
				scrollTop: element.prop("scrollHeight")
			}, 500);
		}

		smoothScroll('scroll-to-bottom');
	</script>
</body>

Output:

Scroll to bottom with jQuery smooth animation

Use element.scroll() to Scroll to Bottom of Div in JavaScript

You can use element.scroll() to scroll to the bottom of an element. What element.scroll() requires is a set of coordinates.

We’ll set the coordinates to the top of the element in this case. Also, if you’d like, you can make it a smooth scrolling.

To scroll to the bottom with element.scroll(), set its first argument to an object. Afterward, the first property of this object should be a top property.

This property should have a value of element.scrollHeight. Also, set the second argument of element.scroll() to behavior: "smooth" for a smooth scroll.

We’ve used element.scroll() on the element in the following code. As a result, when you run the code in your browser, the div will scroll to the bottom.

In addition, the element should be scrollable via CSS overflow-y: scroll.

<head>
	<meta charset="utf-8">
	<title>Scroll to bottom - 4 (Element.scroll())</title>
	<style type="text/css">
		#scroll-to-bottom {
			border: 5px solid #1a1a1a;
			padding: 2em;
			width: 50%;
			margin: 0 auto;
			height: 300px;
			overflow-y: scroll;
		}
		.content {
			height: 400px;
		}

		p {
			font-size: 100px;
		}
	</style>
</head>
<body>
	<div id="scroll-to-bottom">
		<div class="content">
			<p>This is a dummy text</p>
		</div>
	</div>

	<script>
		let scroll_to_bottom = document.getElementById('scroll-to-bottom');
		function scrollBottom(element) {
			element.scroll({ top: element.scrollHeight, behavior: "smooth"})
		}

		scrollBottom(scroll_to_bottom);
	</script>
</body>

Output:

Scroll to bottom with Element scroll

Use element.scrollintoview() to Scroll to Bottom of Div in JavaScript

The Element.scrollIntoView() method will scroll an element to be visible to the user. As a result, you see the overflow content hidden from sight.

At the same time, the bottom of the element.

Unlike previous examples in this article, you’ll need a single div element. This div element should have some content.

Also, you don’t need to set a height for the div because, with scrollIntoView, a defined height could prevent a scroll to the bottom.

In the following code, we’ve called scrollIntoView() on the div element. Also, we’ve set its argument to false.

This is what is required to scroll the element to the bottom.

<head>
	<meta charset="utf-8">
	<title>Scroll to bottom - 5 (scrollIntoView())</title>
	<style type="text/css">
		body {
			padding: 1em;
		}

		div {
			border: 5px solid #1a1a1a;
			padding: 2em;
			width: 50%;
			margin: 0 auto;
		}

		p {
			font-size: 100px;
		}
	</style>
</head>
<body>
	<div id="scroll-to-bottom">
		<p>This is a dummy text</p>
	</div>
	<script type="text/javascript">
		let scroll_to_bottom = document.getElementById('scroll-to-bottom');
		scroll_to_bottom.scrollIntoView(false);

		// scroll_to_bottom.scrollIntoView({ behavior: 'smooth', block: 'end'});
	</script>
</body>

Output:

Scroll to bottom with Element scrollIntoView

Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

Related Article - JavaScript Div

  • Show/Hide Div onClick in JavaScript
  • JavaScript Reload DIV
  • JavaScript Scroll to Top of Div
  • Add HTML to Div Using JavaScript
  • Related Article - JavaScript Scroll

  • Implement Auto Scroll in JavaScript
  • Scroll to the Top of a Page in JavaScript
  • JavaScript Scrollable Div
  • Smooth Scroll in JavaScript
  • Infinite Scroll in JavaScript
  • JavaScript Scroll to Top of Div