如何为滚动容器特定区域设置scroll-padding-top适配书签跳转？

核心问题 #

scroll-padding-top是作用于整个滚动容器的全局属性，无法针对不同锚点元素设置差异化偏移值，导致卡片内标题跳转时，上方图片被粘性头部遮挡。

最优解决方案：使用scroll-margin-top #

scroll-margin-top是作用于锚点元素的属性，可为不同类型的标题单独设置滚动偏移量，完美适配普通标题和卡片标题的不同需求。

修改后的CSS代码 #

html {
  /* 保留全局基础偏移，也可移除，完全由scroll-margin控制 */
  scroll-padding-top: 100px;
}

.something-sticky {
  position: sticky;
  top: 0;
  background-color: #ECECEC;
  border: 1px solid silver;
}

.something-griddy {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.something-cardy {
  border: 1px solid aqua;
}

.example-image {
  width: 100%;
  height: 260px;
  background-color: aqua;
}

/* 普通标题：偏移量等于粘性头部高度 */
h2:not(.something-cardy h2) {
  scroll-margin-top: 100px;
}

/* 卡片内标题：偏移量等于粘性头部高度 + 图片高度 */
.something-cardy h2 {
  scroll-margin-top: calc(100px + 260px);
}

原理说明 #

• 普通标题的scroll-margin-top设为粘性头部高度，确保标题不会被头部遮挡。
• 卡片内标题的scroll-margin-top设为头部高度加图片高度，滚动后图片和标题能完整显示在视野内。
• 该属性兼容性良好，支持Chrome、Firefox、Edge、Safari 15.4+等现代浏览器。

备选方案：JS手动控制滚动位置 #

若需兼容旧浏览器，可通过监听锚点点击事件，手动计算并调整滚动位置：

JS代码示例 #

// 监听所有锚点链接的点击事件
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    
    if (!targetElement) return;
    
    // 获取粘性头部高度
    const headerHeight = document.querySelector('.something-sticky').offsetHeight;
    // 基础滚动目标位置
    let targetTop = targetElement.offsetTop - headerHeight;
    
    // 判断是否为卡片内标题
    if (targetElement.closest('.something-cardy')) {
      // 加上图片高度，调整滚动位置
      const imageHeight = targetElement.previousElementSibling.offsetHeight;
      targetTop -= imageHeight;
    }
    
    // 平滑滚动到目标位置
    window.scrollTo({
      top: targetTop,
      behavior: 'smooth'
    });
    
    // 更新URL哈希
    window.history.pushState(null, null, `#${targetId}`);
  });
});

注意事项 #

• 需确保图片元素是标题的前一个兄弟元素，或根据实际DOM结构调整选择器。
• 手动控制滚动时，要同步更新URL哈希，避免浏览器默认滚动行为干扰。

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