无需JavaScript实现点击HTML/CSS按钮滚动到页面指定区块是否可行

完全可以不依赖JavaScript实现该功能，仅通过HTML原生锚点特性即可实现，还可配合CSS实现平滑滚动效果，具体实现步骤如下：

实现步骤 #

• 第一步：给需要跳转的目标区块设置唯一的id属性，示例代码如下：

<!-- 目标跳转区块 -->
<div id="target-block">
  这是你要滚动到的指定区块内容
</div>

• 第二步：按你使用的按钮类型选择对应实现方式：
  • 方案1：用a标签模拟按钮（最常用方案）
    直接将a标签的样式设置为和你的按钮样式一致，href属性填写#+目标区块的id值即可：

<a href="#target-block" class="your-custom-button-class">点击滚动到目标区块</a>

• 方案2：原生button标签实现
  如果要保留原生<button>标签，可嵌套在form标签中实现跳转，无需JS：

<form action="#target-block" method="get">
  <button type="submit" class="your-custom-button-class">点击滚动到目标区块</button>
</form>

可选优化：实现平滑滚动效果 #

不需要添加JS，仅需给全局添加一行CSS样式，即可让跳转过程变为平滑滚动而非生硬跳转：

html {
  scroll-behavior: smooth;
}

注意事项 #

• 目标区块的id值和跳转链接中#后的内容大小写敏感，需保证完全一致
• 该方案为HTML原生特性，兼容所有主流浏览器

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