在我们使用锚点链接时，有时候定位到站内网页的位置，不太合理，或者被某些板块遮挡，这种问题怎样处理呢？我们可以采取改变锚点定位的基准位置来实现。今天给大家讲解一种纯CSS的处理方法：使用scroll-margin-top 或 scroll-padding-top。
CSS 的scroll-margin-top（针对锚点元素）和scroll-padding-top（针对滚动容器）是专门为滚动锚点偏移设计的属性，无需修改布局，是最优解。
给需要定位的锚点元素直接设置scroll-margin-top: 100px，表示锚点定位时，元素顶部与视口顶部保留 100px 的间距（视觉上即 "向上偏移 100px"）
<a href="#section1">跳转到第一部分</a>
<div id="section1" class="anchor-target">第一部分内容</div>
<style>
/* 锚点元素设置滚动外边距，实现偏移 */
.anchor-target {
scroll-margin-top: 100px; /* 关键属性：向上偏移100px */
}</style>
如果希望所有锚点都统一偏移 100px，给滚动容器（通常是<html>或<body>）设置scroll-padding-top，表示滚动容器的 "滚动内边距"，锚点会定位到该内边距下方。
/* 全局锚点偏移100px */
html {
scroll-padding-top: 100px; /* 关键属性：所有锚点向上偏移100px */
scroll-behavior: smooth; /* 可选：添加平滑滚动效果 */
}兼容性：支持 Chrome 69+、Firefox 68+、Safari 11.1+，基本覆盖现代浏览器。
仿站吧（优度网络工作室）- 高性价比的仿站平台豫ICP备2025144315号-1
在线客服156-3929-6686
