在 JavaScript 中滚动到 Div 的底部
-
在 JavaScript 中使用
scrollTop和scrollHeight滚动到 Div 的底部 - 在 JavaScript 中使用 jQuery 滚动到 Div 的底部
-
在 JavaScript 中使用 jQuery
.animate()滚动到 Div 的底部 -
在 JavaScript 中使用
element.scroll()滚动到 Div 的底部 -
在 JavaScript 中使用
element.scrollintoview()滚动到 Div 的底部
本文将教你如何使用以下方法滚动到 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 的第一个参数。在此对象中，执行以下操作：- 创建一个名为
scrollTop的对象属性。 - 将
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>
输出：
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