修改form表单内div高度时如何避免页面自动滚动到顶部

问题原因 #

form标签内的<button>元素默认type属性为submit，点击后会触发表单默认提交行为，浏览器会默认刷新当前页面并跳转至页首，去掉form标签后提交行为消失，所以问题不会复现。

解决方案 #

任选以下一种方式即可修复：

方式1：显式指定按钮类型为普通按钮（推荐）

给两个按钮都加上type="button"属性，明确告知浏览器这不是提交按钮，不会触发表单提交：

<form>
    <div>
        <input type="checkbox" value="category" id="category">
        <label for="category">category</label>
        <button type="button" class="show-button" onclick="showSubcategories(this)">&#8744</button>
        <button type="button" class="hide-button" onclick="hideSubcategories(this)">&#8743</button>
        <div class="subcategory">
            <input type="checkbox" value="subcategory1" id="subcategory1">
            <label for="subcategory1">subcategory1</label>    
        </div>
        <div class="subcategory">
            <input type="checkbox" value="subcategory2" id="subcategory2">
            <label for="subcategory2">subcategory2</label>    
        </div>
    </div>
</form>

注：原代码中input未加id属性，label的for关联会失效，上述示例顺便补全了对应id属性

方式2：阻止点击事件的默认行为

在点击逻辑里阻止默认的表单提交动作，有两种实现写法：
第一种：直接在onclick属性末尾加return false

<button class="show-button" onclick="showSubcategories(this); return false;">&#8744</button>
<button class="hide-button" onclick="hideSubcategories(this); return false;">&#8743</button>

第二种：修改JS函数接收事件参数，调用阻止默认行为方法

function showSubcategories(show_button, e) {
    e?.preventDefault();
    // 原有逻辑保持不变
    let category_div = show_button.parentNode;
    let subcategories_divs = category_div.querySelectorAll('.subcategory');
    for (var i=0; i<subcategories_divs.length; i++) {
        subcategories_divs[i].style.height = "32px";
    }
    show_button.style.display = "none";
    category_div.querySelector('.hide-button').style.display = "inline-block";
}

// hideSubcategories函数做相同修改即可

调用时传入事件对象：

<button class="show-button" onclick="showSubcategories(this, event)">&#8744</button>

两种方案都可解决滚动到顶部的问题，第一种方式语义化更清晰，更推荐使用。

内容的提问来源于stack exchange，提问作者Marco Antonio Cabrera Aguilar