当URL包含锚点链接时，如何为对应ID的div设置边距或内边距？

当页面URL为 localhost/test.html#services，或从其他页面通过链接跳转至该锚点时，由于顶部固定导航栏的存在，id="services" 的div会被导航栏遮挡。以下是两种可行的解决方案：

方案一：CSS :target 伪类实现（纯CSS） #

利用CSS的:target伪类，仅当元素作为锚点目标时添加顶部内边距或外边距：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
  background-color: #f1f1f1;
}
nav ul li {
  display: inline-flex;
}
.container {
  margin-top: 4rem;
}
.container h1 {
  text-align: center;
}

/* 新增：当services为锚点目标时添加顶部内边距 */
#services:target {
  padding-top: 5rem; /* 数值大于等于导航栏高度 */
  margin-top: -5rem; /* 抵消padding带来的额外空间，避免页面布局偏移 */
}

这种方法无需JavaScript，仅靠CSS就能实现。通过padding-top给内容留出导航栏的高度，再用负的margin-top抵消padding对整体布局的影响，保证页面其他部分不受干扰。

方案二：JavaScript动态判断并设置 #

如果需要兼容更旧的浏览器，或者需要更灵活的逻辑，可以使用JavaScript检测URL中的锚点，并为目标元素添加样式：

// 页面加载时检测锚点
window.addEventListener('load', function() {
  const hash = window.location.hash;
  if (hash === '#services') {
    const servicesDiv = document.getElementById('services');
    if (servicesDiv) {
      servicesDiv.style.paddingTop = '5rem';
      // 或者使用margin-top: '5rem'，根据需求选择
    }
  }
});

// 监听页面内锚点变化事件
window.addEventListener('hashchange', function() {
  const hash = window.location.hash;
  // 先移除所有可能的样式
  document.querySelectorAll('div[id]').forEach(el => {
    el.style.paddingTop = '';
  });
  if (hash === '#services') {
    const servicesDiv = document.getElementById('services');
    if (servicesDiv) {
      servicesDiv.style.paddingTop = '5rem';
    }
  }
});

这种方法可以处理页面加载和页面内锚点变化两种情况，确保无论从外部跳转还是内部点击链接，都能正确设置顶部间距。

注意事项 #

• 导航栏高度为4rem，设置的间距（padding/margin）建议略大于等于这个值，确保内容完全显示在导航栏下方。
• CSS方案中padding-top+负margin-top的组合不会改变页面整体滚动位置，体验更流畅；直接设置margin-top可能导致页面整体下移，需根据实际布局选择。

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