表单提交,页面滚动到必填项位置

复制代码
<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>
相关推荐
江城开朗的豌豆4 分钟前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙10 分钟前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜12 分钟前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort28 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney1 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥1 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT1 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare1 小时前
选择文件夹路径
前端
艾小码1 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月1 小时前
JavaScript作用域与作用域链详解
前端·面试