下面是“纯CSS实现网页内部锚点跳转时上下偏移的示例代码”的完整攻略：
在网页内部进行跳转时，我们经常希望能够有一个辅助定位的功能，比如锚点跳转。但是，如果锚点存在于页面的中央，我们希望跳转后能够有一个上下位移的效果，来使页面的焦点更加精准，这就需要我们实现“网页内部锚点跳转时上下偏移”的功能。
我们可以通过给目标标签设定一个负的margin值来实现上偏移，而将负值改成正值，则可实现下偏移。下面是一个示例代码：
<link rel="stylesheet" href="style.css" />
<body>
<header>
<h1>Lorem ipsum dolor sit amet</h1>
</header>
<main>
<h2 id="section1">Section One</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo magni neque necessitatibus quisquam, rem doloremque at fuga, impedit aliquam quasi blanditiis enim alias quas expedita vel itaque voluptas autem.</p>
<h2 id="section2">Section Two</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, et. Adipisci, consequuntur cupiditate amet consectetur qui, dolorum cumque fuga numquam aliquam dolores praesentium, eos quisquam saepe eligendi quaerat maxime molestiae?</p>
</main>
<nav>
<ul>
<li><a href="#section1">Section One</a></li>
<li><a href="#section2">Section Two</a></li>
</ul>
</nav>
</body>
nav {
position: fixed;
top: 0;
left: 0;
}
h2:target {
margin-top: -100px;
}
上面的示例代码中，我们为页面添加了一个固定定位的导航栏，用于实现锚点跳转功能。而对于需要产生偏移效果的h2标题标签，我们通过使用:target伪类选择器并设定margin-top的负值，来实现目标标签跳转后向上偏移的效果。如果要实现下偏移效果，只需要将负值改成正值即可。
除了使用margin负值之外，我们还可以使用transform属性的translate函数来实现上下位移的效果。这种方法的好处是可以避免与其他margin或padding属性产生的影响。下面是一个示例代码：
<link rel="stylesheet" href="style.css" />
<body>
<header>
<h1>Lorem ipsum dolor sit amet</h1>
</header>
<main>
<h2 id="section1">Section One</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo magni neque necessitatibus quisquam, rem doloremque at fuga, impedit aliquam quasi blanditiis enim alias quas expedita vel itaque voluptas autem.</p>
<h2 id="section2">Section Two</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, et. Adipisci, consequuntur cupiditate amet consectetur qui, dolorum cumque fuga numquam aliquam dolores praesentium, eos quisquam saepe eligendi quaerat maxime molestiae?</p>
</main>
<nav>
<ul>
<li><a href="#section1">Section One</a></li>
<li><a href="#section2">Section Two</a></li>
</ul>
</nav>
</body>
nav {
position: fixed;
top: 0;
left: 0;
}
h2:target {
transform: translate(0, -100px);
}
在上面的示例代码中，我们同样为页面添加了一个固定定位的导航栏，并使用:target伪类选择器指定了被点击的标题标签的样式。不同的是，我们使用了transform属性的translate函数来实现偏移效果，而不是使用margin负值。translate函数接受两个参数，第一个参数表示水平方向的偏移量，第二个参数表示垂直方向的偏移量。类似于margin负值的方法，如果需要实现下偏移效果，只需要将第二个参数的负值改成正值即可。
通过上面的两个示例，我们可以看出，在CSS中实现网页内部锚点跳转时的上下偏移并不困难，只需要使用margin负值或transform属性的translate函数即可。不同方法的差异在于margin的效果更加具有减弱垂直布局和造成margin重合的功能，而translate则更加独立和直接。在实际开发中，我们可以根据具体的需求来选择使用哪种方法。
本文链接：http://task.lmcjl.com/news/15724.html