迹忆客 专注技术分享

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >
Vue React JavaScript Angular CSS HTML

在 JavaScript 中滚动到 Div 的底部

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

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

  1. 使用 scrollTop 和 scrollHeight 滚动到底部。
  2. 使用 jQuery 滚动到底部。
  3. 使用 jQuery .animate() 滚动到底部。
  4. 使用 Element.scroll() 滚动到底部。
  5. 使用 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。因此，我们将把所有代码包装在一个函数中。

函数内部工作如下：

  1. 使用 jQuery 选择器获取元素的 ID。
  2. 将 .animate() API 附加到该元素。
  3. 传递一个对象作为 .animate() API 的第一个参数。在此对象中，执行以下操作：
    1. 创建一个名为 scrollTop 的对象属性。
    2. 将 scrollTop 值设置为 element.prop("scrollHeight")。
  4. 将 .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 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

相关文章

JavaScript 可滚动的 Div

发布时间：2024/03/18 浏览次数：197 分类：JavaScript

JavaScript 文档的结构在几何上是合理的。多个参数让特定元素具有不同的特征。可滚动的 div 将是这种大小的修正。

在 JavaScript 中滚动到页面顶部

发布时间：2024/03/18 浏览次数：175 分类：JavaScript

我们在这篇博文中展示了几种使用 JavaScript 滚动到页面顶部的方法。我们同时使用原生 JavaScript 和 jQuery。你还将看到一个巧妙的纯 HTML hack 来滚动到顶部 JavaScript 和一个小脚本来设计自

JavaScript 函数重载

发布时间：2024/03/17 浏览次数：129 分类：JavaScript

本教程展示了如何使用 if-else 语句、switch 语句和函数表达式在 JavaScript 中实现函数重载。

JavaScript console.error

发布时间：2024/03/17 浏览次数：61 分类：JavaScript

JavaScript 有多个与其他数据类型和对象交互的对象。控制台也是一个类似的对象，它允许我们在浏览器环境中预览开发输出。本文展示了控制台在 JavaScript 中的使用。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

Mysql Jquery Javascript Angular Flask Python Django CSharp C# Batch Linux Bash C++ arduino Numpy powershell R Rust Ruby Matlab git Cpp C Java
扫码一下
查看教程更方便