如何设置页面内容始终处于顶部导航栏（Navigation Topbar）下方？

方法一：CSS 滚动内边距（推荐） #

如果你的顶部导航栏是固定定位（position: fixed），直接给页面根元素设置scroll-padding-top，值等于导航栏的高度，这样页面滚动到锚点时会自动留出导航栏的空间：

html {
  scroll-padding-top: 80px; /* 替换成你导航栏的实际高度，比如80px */
}

这个方案无需修改HTML结构，实现起来最简洁。

方法二：锚点元素边距调整 #

给每个锚点对应的内容区块添加顶部内边距，同时用负的外边距抵消，避免区块之间的间距被额外拉大：

.portfolio-section { /* 替换成你内容区块的实际类名 */
  padding-top: 80px;
  margin-top: -80px;
}

方法三：JavaScript 手动调整滚动位置 #

如果CSS方案不适用，可以通过JS监听锚点点击事件，计算并调整滚动位置：

// 给所有锚点链接绑定点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    if (!targetElement) return;
    
    // 获取导航栏高度
    const navbarHeight = document.querySelector('.top-navbar').offsetHeight;
    // 计算目标位置，减去导航栏高度
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
    
    // 滚动到目标位置，可选平滑滚动
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  });
});

注意把.top-navbar替换成你项目中导航栏的实际选择器。

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