<body>
<div style="display:flex;flex-flow: column;">
1<input value="" style="margin:200px; border:1px solid red"></input>
2<input value="" style="margin:200px; border:1px solid red"></input>
3<input value="" style="margin:200px; border:1px solid red"></input>
4<input value="" style="margin:200px; border:1px solid red"></input>
5<input value="" style="margin:200px; border:1px solid red"></input>
6<input value="" style="margin:200px; border:1px solid red"></input>
</div>
<button onClick="test()">tijiao</button>
<script>
function test(){
const inputs = Array.from(document.getElementsByTagName('input'));
const emptyIndex = inputs.findIndex(input => input.value === '');
inputs[emptyIndex].scrollIntoView({behavior: 'smooth'});
}
</script>
</body>
还有使用锚点来实现的方式，比较方便
<!DOCTYPE html>
<html>
<head>
<style>
/* 用于创建占位符，确保定位不被导航栏等固定元素遮挡 */
#placeholder {
display: block;
height: 100px;
margin-top: -100px;
visibility: hidden;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">跳转到 Section 1</a></li>
<li><a href="#section2">跳转到 Section 2</a></li>
<li><a href="#section3">跳转到 Section 3</a></li>
</ul>
</nav>
<div id="placeholder"></div>
<section id="section1" style="margin:900px">
<h2>Section 1</h2>
<!-- 内容 -->
</section>
<section id="section2" style="margin:900px">
<h2>Section 2</h2>
<!-- 内容 -->
</section>
<section id="section3" style="margin:900px">
<h2>Section 3</h2>
<!-- 内容 -->
</section>
</body>
</html>
