在 JavaScript 中滚动到 Div 的底部

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中滚动到 Div 的底部

作者：迹忆客最近更新：2024/03/18 浏览次数：

本文将教你如何使用以下方法滚动到 div 的底部。

使用 scrollTop 和 scrollHeight 滚动到底部。
使用 jQuery 滚动到底部。
使用 jQuery .animate() 滚动到底部。
使用 Element.scroll() 滚动到底部。
使用 Element.scrollIntoView() 滚动到底部。

在 JavaScript 中使用 `scrollTop` 和 `scrollHeight` 滚动到 Div 的底部

scrollTop 和 scrollHeight 的组合可以导致元素滚动到底部，因为 scrollTop 确定垂直滚动的像素数。相反，scrollHeight 是元素的高度（可见和不可见部分）。

因此，对于一个元素，当 scrollTop 等于 scrollHeight 时，浏览器向上滚动。这允许看到元素的底部。

但是，此方法要求元素应该是可滚动的。当元素具有导致垂直溢出的子元素时，你可以实现此目的。

同时，你可以使用 overflow-y: scroll 控制溢出。这意味着如果没有 overflow-y: scroll，此方法将不起作用。

例如，在下一个代码块中，ID 为 scroll-to-bottom 的 HTML 元素的高度为 300 像素。同时，子元素的高度为 400 像素。

结果，子元素导致其父元素溢出。但是，我们在 CSS 中使用 overflow-y: scroll 控制了溢出。

<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>

输出：

在 JavaScript 中使用 jQuery 滚动到 Div 的底部

jQuery 定义了一个名为 scrollTop 的 API，它将获取或设置滚动条的垂直位置。有问题的滚动条将用于一组匹配的元素。

当与元素的 scrollHeight 一起使用时，你可以滚动到元素的底部。

在接下来的代码中，我们使用 jQuery 选择器选择了一个元素。同时，我们使用元素 scrollTop 来选择元素及其 scrollHeight。

你会从代码中注意到我们使用 [0] 来获取 DOM 元素。因此，当你在 Web 浏览器中加载代码时，div 将滚动到底部。

此外，在 JavaScript 代码中，我们提供了这种方法的变体。但是，我们已将它们作为评论留下。

最后一点，这种方法还要求元素是可滚动的。

<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>

输出：

在 JavaScript 中使用 jQuery `.animate()` 滚动到 Div 的底部

jQuery .animate() API 允许你在 CSS 属性上执行自定义动画。因此，你可以创建平滑的滚动效果。

我们所说的平滑是指滚动到底部效果会吸引用户。但是，你需要 scrollTop 和 scrollHeight 才能完成此操作。

我们的目标是保持代码干净，因为我们使用 .animate() API。因此，我们将把所有代码包装在一个函数中。

函数内部工作如下：

使用 jQuery 选择器获取元素的 ID。
将 .animate() API 附加到该元素。
传递一个对象作为 .animate() API 的第一个参数。在此对象中，执行以下操作：
1. 创建一个名为 scrollTop 的对象属性。
2. 将 scrollTop 值设置为 element.prop("scrollHeight")。
将 .animate() API 的第二个参数设置为动画持续时间。

之后，我们在元素的 HTML ID 上调用这个函数。同时，该元素应该可以使用 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>

输出：

在 JavaScript 中使用 `element.scroll()` 滚动到 Div 的底部

你可以使用 element.scroll() 滚动到元素的底部。element.scroll() 需要的是一组坐标。

在这种情况下，我们将坐标设置为元素的顶部。此外，如果你愿意，可以使其平滑滚动。

要使用 element.scroll() 滚动到底部，请将其第一个参数设置为对象。之后，该对象的第一个属性应该是 top 属性。

此属性的值应为 element.scrollHeight。此外，将 element.scroll() 的第二个参数设置为 behavior: "smooth" 以获得平滑滚动。

我们在以下代码中的元素上使用了 element.scroll()。结果，当你在浏览器中运行代码时，div 将滚动到底部。

此外，该元素应该可以通过 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>

输出：

在 JavaScript 中使用 `element.scrollintoview()` 滚动到 Div 的底部

Element.scrollIntoView() 方法将滚动一个元素以对用户可见。结果，你会看到隐藏在视线之外的溢出内容。

同时，元素的底部。

与本文前面的示例不同，你需要一个 div 元素。这个 div 元素应该有一些内容。

此外，你不需要为 div 设置高度，因为使用 scrollIntoView，定义的高度可能会阻止滚动到底部。

在下面的代码中，我们在 div 元素上调用了 scrollIntoView()。此外，我们将其参数设置为 false。

这是将元素滚动到底部所需的内容。

<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>

输出：

上一篇：JavaScript 可滚动的 Div

下一篇：在 JavaScript 中禁用滚动

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享