在 HTML 页面内实现锚点定位和跳转。

<a> 标签

通过 a 标签和 ID 选择器实现锚点和页面跳转。对应的 URL 会进行变化。

<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>

<h1 id="A">A</h1>
<div style="height: 800px"></div>
<h1 id="B">B</h1>
<div style="height: 800px"></div>
<h1 id="C">C</h1>
<div style="height: 800px"></div>

实例代码：锚点跳转-a 标签

scrollIntoView

使用元素的 scrollIntoView 来实现页面的滚动。该方法不会改变对应的 URL。

可以通过指定参数 { behavior: "smooth" } 来实现页面的滚动动画。

<button id="btnA">A</button>
<button id="btnB">B</button>
<button id="btnC">C</button>

<h1 id="A">A</h1>
<div style="height: 800px"></div>
<h1 id="B">B</h1>
<div style="height: 800px"></div>
<h1 id="C">C</h1>
<div style="height: 800px"></div>

const A = document.getElementById('btnA');
const B = document.getElementById('btnB');
const C = document.getElementById('btnC');

function handleClick(id) {
  document.getElementById(id).scrollIntoView();
}

A.addEventListener('click', () => handleClick('A'));
B.addEventListener('click', () => handleClick('B'));
C.addEventListener('click', () => handleClick('C'));

实例代码：锚点跳转-scrollIntoView

参考链接