需要制作锚标签以转到特定的id，同时为固定的报头留出空间

<header id="header" style="position: fixed; top: 0; width: 100%;">
    <!-- 报头内容 -->
</header>
<div style="height: 100px;"></div> <!-- 为报头留出空间的占位元素 -->
<section id="section1">
    <h2>Section 1</h2>
    <!-- 内容 -->
</section>
<a href="#section1">Go to Section 1</a> <!-- 锚标签 -->

#header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff; /* 示例背景色 */
    z-index: 1000; /* 确保报头在最上层 */
}

/* 为报头留出空间的占位元素 */
div[style="height: 100px;"] {
    height: 100px; /* 与报头高度相同 */
}

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    });
});