JS的scrollIntoView

最新推荐文章于 2025-01-08 22:19:00 发布

转载最新推荐文章于 2025-01-08 22:19:00 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/carriezhao/p/6857408.html

文章标签：

#javascript #ViewUI

本文介绍 scrollIntoView() 方法的使用方式，演示了如何通过 JavaScript 滚动页面使指定元素进入可视区域。提供了具体示例代码，包括 HTML 结构、CSS 样式和 JavaScript 事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐；如果alignWithTop为false，则元素下边框与视窗底部齐平

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollIntoView</title>
<style type="text/css">
body{
height: 20000px;
}
#pink{
margin: 1000px auto 100px;
width: 100px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<div id="pink"></div>
<script type="text/javascript">
document.getElementById('btn').addEventListener('click', function () {
document.getElementById('pink').scrollIntoView(true);
})
</script>
</body>
</html>