HTML/CSS问题：发送按钮点击后不应滚动至页面顶部

一、实现仅重置表单数据且点击不滚动至顶部的按钮 #

直接使用原生重置按钮即可，默认不会触发页面滚动，且仅负责重置表单字段到初始值：

• 方法1：用<input>创建重置按钮

<input type="reset" value="重置">

• 方法2：用<button>并指定type="reset"

<button type="reset">重置</button>

如果按钮不在表单内部，可通过form属性关联目标表单ID：

<form id="userForm">
  <!-- 表单输入字段 -->
</form>
<button type="reset" form="userForm">重置表单</button>

二、在按钮内部实现锚点功能（修正你当前的代码问题） #

你当前用<a>包裹<button>的写法不符合HTML规范，还会触发锚点跳转导致页面滚动。推荐两种规范实现方式：

方式1：按钮执行表单操作+手动触发锚点滚动 #

保留按钮的表单功能，同时在点击事件里通过JS实现锚点跳转，还能支持平滑滚动：

<form id="myForm">
  <!-- 表单字段 -->
</form>
<button type="reset" onclick="document.getElementById('contacts').scrollIntoView({behavior: 'smooth'})">重置并跳转到联系区</button>
<div id="contacts">联系我们区域</div>

方式2：纯锚点跳转按钮 #

如果不需要表单操作，直接给按钮添加点击事件实现锚点跳转：

<button onclick="window.location.hash = 'contacts'">跳转到联系区</button>
<div id="contacts">联系我们区域</div>

注意：不要用<a>嵌套<button>，这种写法会导致交互冲突，同时触发a的跳转和按钮的表单事件，不符合标准。

内容的提问来源于stack exchange，提问作者Yuliia Kyrychenko