锚点滚动导航因Sticky Content无法跳转到对应区块的解决方法

现有代码 #

导航栏代码

<nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#">Home</a></li>
          <li><a class="nav-link scrollto" href="#partners">Partners</a></li>
          <li><a class="nav-link scrollto" href="#services">Services</a></li>
          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
         <ul>
<nav>

粘性内容区块代码

<section id="partners" />
 <section id="partners" />
 <section id="services" />
 <section id="contact" />

问题 #

滚动至页面底部后，点击锚点导航无法跳转到对应区块。

问题原因 #

1. 重复ID冲突：页面存在两个id="partners"的元素，HTML要求ID必须唯一，浏览器无法准确定位目标元素。
2. 空元素无高度：这些<section>是自闭合空标签，高度为0，页面滚动到底部后，浏览器无法滚动到高度为0的元素位置。
3. 标签写法错误：<section>不属于HTML自闭合标签，错误写法可能导致元素解析异常。

解决步骤 #

1. 修复重复ID与标签格式

删除重复的区块，改用标准闭合标签写法：

<section id="partners"></section>
<section id="services"></section>
<section id="contact"></section>

2. 给区块设置基础高度

空区块无高度会导致定位失效，添加CSS保证每个区块有可滚动的空间：

section {
  min-height: 100vh; /* 每个区块至少占一屏高度 */
  padding-top: 70px; /* 如果导航是粘性固定的，预留导航高度避免内容被遮挡 */
}

3. 优化滚动逻辑（若使用JS平滑滚动）

如果依赖scrollto类的JS实现滚动，调整逻辑处理页面底部边界：

document.querySelectorAll('.nav-link.scrollto').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    if (targetId === '#') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    const targetEl = document.querySelector(targetId);
    if (!targetEl) return;
    
    const navHeight = document.getElementById('navbar').offsetHeight;
    const targetTop = targetEl.offsetTop - navHeight;
    // 计算页面最大可滚动高度，避免滚动超出边界
    const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
    window.scrollTo({ top: Math.min(targetTop, maxScroll), behavior: 'smooth' });
  });
});

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