通过js滑动到指定内容区

最新推荐文章于 2024-07-03 23:11:17 发布

Master.Yuan

最新推荐文章于 2024-07-03 23:11:17 发布

阅读量346

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/yuanwen52/article/details/134337331

该篇文章介绍了如何在HTML页面中，通过JavaScript实现点击按钮后使页面中的指定内容区域（PID=artical）平滑滚动到可视区域。作者展示了使用`scrollIntoView`方法配合DOM操作来达成这一效果。

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

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.container {
			width: 100%;
			height: 1500px;
			background: gray;
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<button id="but">滑动到指定内容区</button>
	<div class="container"></div>
	<p id="artical">指定内容毒贩夫妇反反复复凤飞飞发发发发发发发发发发发发发发发发</p>
	<script>
		const but = document.getElementById('but')
		but.onclick = () => {
			const dom = document.getElementById('artical')
			dom.scrollIntoView({ behavior: 'smooth' })
		}

	</script>
</body>

</html>