HTML锚点跳转ABOUT US区块失效始终返回首页问题求助

问题根因 #

• HTML结构存在闭合错误：代码末尾存在冗余</div>标签，导致设置了id="aboutus"的section标签实际包裹范围不符合预期，该section在标准文档流中高度为0，默认位置在页面最顶部。
• 布局方式误用：你给首屏区块.bg、About区块.bg2都设置了position: absolute，这类定位会让元素完全脱离标准文档流，浏览器计算锚点跳转位置时，只会读取元素在标准流中的默认位置，不会识别你手动给绝对定位元素设置的top: 2024px偏移值，因此点击锚点时会直接跳转到section所在的顶部位置（即首页）。
• 标签嵌套不规范：导航栏<nav>内部直接放置<li>标签不符合HTML语法要求，<li>必须作为<ul>/<ol>的子元素存在，这类写法可能触发非预期的渲染异常。

修复步骤 #

1. 修正HTML结构
   删除代码末尾冗余的</div>标签，给导航内的<li>外层补全<ul>包裹，调整后的核心结构如下：

<div class="bg">
    <div class="banner">
        <img src="logo.png" alt="Logo UMS">
        <p>
            <a class="eng" href="#">ENG | </a>
            <a class="bm" href="#">BM</a>
        </p>
    </div>
    <div class="homeabout">
        <nav>
            <ul style="list-style-type:none; margin:0; padding:0;">
                <li><a class="homestyle" href="#">HOME </a></li> 
                <li><a href="#aboutus" class="aboutstyle"> ABOUT US</a></li> 
                <li><a class="servicesstyle" href="#">SERVICES</a></li> 
                <li><a class="staffstyle" href="#">STAFF</a></li>
            </ul>
        </nav>
    </div>
    <div class="title">
        <p class="wlcome"> WELCOME TO </p> 
    </div>
    <div>
        <a href="#" class="btnctc">Contact Us</a>
    </div>
</div>
<section id="aboutus">
    <div class="bg2"> 
        <div class="homeabout_2">
            <ul style="list-style-type:none;">
                <li><a class="homestyle2" href="#">HOME </a></li> 
            </ul>
        </div>
    </div>
</section>

2. 调整CSS布局逻辑
   整页纵向排布的区块不要滥用绝对定位，保留.bg的相对定位作为内部banner绝对定位的参考即可，删除.bg、.bg2上脱离文档流的绝对定位配置和手动top偏移，让区块按照HTML顺序在标准流中自然排布，调整后的CSS如下：

/* 清除浏览器默认边距避免计算偏差 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.bg {
    position: relative;
    width: 1440px;
    height: 1024px;
    background: url(bg.jpg);
}
.banner {
    position: absolute;
    width: 1443px;
    height: 148px;
    left: -3px;
    top: 62px;
    background: #FFFFFF;
    box-shadow: 0px 4px 14px 9px rgba(0, 0, 0, 0.2);
}
.bg2 {
    width: 1440px;
    height: 2024px;
    background: url(bg2.png);
}

3. 可选优化：平滑滚动
   如果需要锚点跳转时有平滑滚动效果，可以添加如下CSS：

html {
    scroll-behavior: smooth;
}

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