点击锚点跳转至ID后为目标区块添加顶部padding的实现方案

解决锚点跳转后为目标区块添加顶部内边距的问题 #

方案一：纯CSS实现（推荐，无需JS） #

利用CSS的:target伪类，它会自动匹配当前URL锚点指向的元素，直接为目标区块追加顶部内边距：

.menu {
  padding: 10px 40px;
}

.block {
  margin: 40px;
  padding: 40px;
  background: purple;
  height: 200px;
  color: white;
  /* 可选：添加过渡动画让样式变化更平滑 */
  transition: padding-top 0.3s ease;
}

/* 选中当前锚点对应的区块，添加40px顶部内边距（原padding-top为40px，所以设置为80px） */
.block:target {
  padding-top: 80px;
}

HTML代码无需修改，保持原有结构：

<div class="menu">
  <a href="#block1">Go to Block 1</a>
  <a href="#block2">Go to Block 2</a>
  <a href="#block3">Go to Block 3</a>
  <a href="#block4">Go to Block 4</a>
</div>

<div id="block1" class="block">Block 1</div>
<div id="block2" class="block">Block 2</div>
<div id="block3" class="block">Block 3</div>
<div id="block4" class="block">Block 4</div>

方案二：JavaScript实现（适用于复杂场景） #

如果需要更灵活的控制（比如跳转后移除其他区块的样式、兼容特殊浏览器行为），可以用JS监听锚点变化：

// 获取所有锚点链接和区块元素
const menuLinks = document.querySelectorAll('.menu a');
const blocks = document.querySelectorAll('.block');

// 重置所有区块的顶部内边距
function resetBlockPadding() {
  blocks.forEach(block => block.style.paddingTop = '40px');
}

// 设置目标区块的顶部内边距
function setTargetPadding(targetId) {
  const targetBlock = document.getElementById(targetId);
  if (targetBlock) {
    targetBlock.style.paddingTop = '80px';
  }
}

// 监听链接点击事件
menuLinks.forEach(link => {
  link.addEventListener('click', () => {
    resetBlockPadding();
    const targetId = link.getAttribute('href').replace('#', '');
    setTargetPadding(targetId);
  });
});

// 监听浏览器前进后退，保持样式同步
window.addEventListener('popstate', () => {
  resetBlockPadding();
  const currentHash = window.location.hash.replace('#', '');
  if (currentHash) {
    setTargetPadding(currentHash);
  }
});

将上述JS代码放在HTML的<body>末尾即可。

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