偏移html锚以调整固定标题[重复]
Posted
技术标签:
【中文标题】偏移html锚以调整固定标题[重复]【英文标题】：offsetting an html anchor to adjust for fixed header [duplicate] 【发布时间】：2012-05-30 18:05:27 【问题描述】：我正在尝试清理我的锚的工作方式。我有一个固定在页面顶部的标题，所以当您链接到页面其他位置的锚点时，页面会跳转，因此锚点位于页面顶部，将内容留在固定标题后面（我希望这就说得通了）。我需要一种方法将锚点从标题的高度偏移 25px。我更喜欢 html 或 CSS，但也可以接受 javascript。
【问题讨论】：
***.com/questions/1431639/… 中显示的包装器 div 我认为很好，不会太激进。 关于这个主题有一篇不错的文章：css-tricks.com/hash-tag-links-padding 相关：***.com/questions/4086107/… 将这个标记为重复的问题不接受 javascript 解决方案。这个问题有脚本解决方案。它应该重新打开。 @J.Bruni 这里有一篇关于scroll-padding-top 的更新的 CSS-tricks.com 文章：css-tricks.com/…
【参考方案1】：
不要使用与页面的其余内容重叠的固定位置导航栏（整个页面主体可滚动），而是考虑使用带有静态导航栏的不可滚动主体，然后让页面下方绝对定位的可滚动 div 中的内容。
也就是说，有这样的 HTML...
<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
<p>Bla bla bla</p>
<p>Yadda yadda yadda</p>
<p>Mary had a little lamb</p>
<h2 id="stuff-i-want-to-link-to">Stuff</h2>
<p>More nonsense</p>
</div>
...和这样的 CSS：
.static-navbar
height: 100px;
.scrollable-content
position: absolute;
top: 100px;
bottom: 0;
overflow-y: scroll;
width: 100%;
但是，这种方法有一个明显的缺点，即当页面标题中的元素获得焦点时，用户将无法使用键盘滚动页面（例如，通过向上和向下箭头或Page Up 和 Page Down 键）。
Here's a JSFiddle demonstrating this in action.
【讨论】：
非 hacky，但是：(1) 在这个例子之外完全没用，(2) 采用和维护很麻烦，(3) 反语义和/或 css 滥用，(4) 不直观。我会在任何一天采用 cleana:before ... 解决方案！
对我来说最好的答案。我现在正在使用它。这里的所有答案都是hacky。向所有内容添加“之前”伪元素对我来说是不可接受的，并且可能会干扰已经使用“之前”伪元素的许多其他 CSS 元素。这是正确且干净的方法。
这绝对是最好的解决方案。它不需要黑客或伪类。我还发现它是 100% 语义化的。本质上，您想要滚动页面的一部分，并且您明确地设置了它。另外，它彻底解决了如何让标题在没有背景的navs后面消失的问题。【参考方案2】：
FWIW 这对我有用：
[id]::before
content: '';
display: block;
height: 75px;
margin-top: -75px;
visibility: hidden;
【讨论】：
你这个男人！很好的解决方案。 我不完全理解为什么会这样，但我 +1。其他没有一个比这更容易实现或工作。 :-) 我把它包装在一个媒体查询中，所以它只适用于我有固定导航的中大屏幕。 这可能有效，但它会与标题之前的内容重叠。 有人能解释一下为什么会这样吗？【参考方案3】：我的解决方案为我们的 CMS 结合了 target 和 before 选择器。其他技术不考虑锚点中的文本。将高度和负边距调整为您需要的偏移量...
:target::before
content: '';
display: block;
height: 180px;
margin-top: -180px;
【讨论】：
这两个 CSS 解决方案乍一看对我不起作用，但最后我发现它可能与其他 CSS 属性不兼容。添加了一个包装器并解决了问题。 :target:before 与 display:block 的组合最适合我。 [已解决] 此解决方案有效，我将此解决方案与display: block; 一起使用。没有特殊类、空标签或 javascript。
如果您决定使用此方法，最好同时添加pointer-events: none;。因为否则与不可见叠加层（锚点上方）相交的链接将无法点击。
这个解决方案通过断开它们来破坏折叠的边距。编辑：我只是将 id 放在 <h1> 而不是 <section> 上，它工作正常
否则很好，但是如果目标元素的父元素具有grid-area: named-area，则所需的偏移量无法逃脱网格区域，并且生成的实际偏移量可能太短。对于这种特殊情况，我还没有找到一个好的解决方法，所以一般来说这应该被认为是正确的答案。【参考方案4】：
我也在寻找解决方案。就我而言，这很容易。
我有一个包含所有链接的列表菜单：
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>
下面是它应该去的标题。
<h3>one</h3>
<p>text here</p>
<h3>two</h3>
<p>text here</p>
<h3>three</h3>
<p>text here</p>
<h3>four</h3>
<p>text here</p>
现在因为我的页面顶部有一个固定菜单，所以我不能让它转到我的标签，因为那会在菜单后面。
相反，我在标签中放置了一个带有正确 id 的 span 标签。
<h3><span id="one"></span>one</h3>
现在使用 2 行 CSS 来正确定位它们。
h3 position:relative;
h3 span position:absolute; top:-200px;
更改顶部值以匹配固定标题的高度（或更多）。 现在我假设这也适用于其他元素。
【讨论】：
这肯定会得到复选标记。 我喜欢这个解决方案span 可以替换为a
这非常好用，并且避免了我使用其他技术遇到的一些问题，例如使用设置 padding-top 的 h2 标签时。
太棒了。完美运行。+1【参考方案5】：
我找到了这个解决方案：
<a name="myanchor">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>
这不会在内容中造成任何间隙，并且锚链接效果非常好。
【讨论】：
效果很好。我创建了一个特殊的 CSS 锚类并将其附加到我的锚：。谢谢。 导航中的指示器仍然存在抖动。因此，如果您向下滚动页面，则活动导航项在您滚动经过锚点目标之前不会切换。上方的元素将不可点击，因为隐藏的填充/边距。我最终使用了 Ian Clack 的 jQuery 解决方案，效果很好。
你如何让它与使用元素 ID 的锚一起工作，即Text
...Link一个>？ 我想我明白了：h2[id], h3[id], h4[id], a[name] padding-top: XXpx;底部填充：XXpx；它适用于所有带有 ID 的 h2、h3、h4 标签，以及命名锚。【参考方案6】：您可以只使用 CSS 而无需任何 javascript。
给你的主播上课：
<a class="anchor" id="top"></a>
然后，您可以通过将锚定为块元素并进行相对定位，将锚定位到高于或低于实际出现在页面上的位置。 -250px 将使锚点向上 250px
a.anchor
display: block;
position: relative;
top: -250px;
visibility: hidden;
【讨论】：
这是更好的答案，因为它不依赖于位置设置为相对的父元素。感谢您发布此内容。 喜欢您的解决方案！它似乎不适用于 IE7。无论如何，我打算从现在开始忽略IE7用户...... 如果你想让它对可见元素起作用，你也可以使用伪元素，比如.thing-with-anchor:before content: ''; display: block; position: relative; width: 0; height: 5em; margin-top: -5em 显示块和相对位置是必不可少的。
我们不应该再使用没有 href 属性的标签了。相反，我们假设在标题/部分/等中使用 id 标签作为锚定文本。那有什么解决办法呢？
@harpo：好主意，但行不通。在 Chrome 40 中试过。【参考方案7】：
不用js也可以不用修改html。它是纯 CSS 的。
a[id]::before
content: '';
display: block;
height: 50px;
margin: -30px 0 0;
这将在每个带有 id 的 a-tag 之前附加一个伪元素。调整值以匹配标题的高度。
【讨论】：
有趣的想法，但请注意，如果您碰巧有与id 的可见链接，这会破坏显示。
如果您想知道为什么它不适合您，请检查父元素是否没有 border 或 padding。
我将其修改为选择 :target[id]:before，因为我锚链接到的 id 有时是 h1-h6。
a[id]:before 可以改为 div[name]:before
高度和负边距应该匹配吧？【参考方案8】：
由于这是一个演示问题，纯 CSS 解决方案将是理想的。然而，这个问题是在 2012 年提出的，尽管已经提出了相对定位/负边距解决方案，但这些方法看起来相当老套，会产生潜在的流量问题，并且无法动态响应 DOM/视口的变化。
考虑到这一点，我相信使用 JavaScript仍然（2017 年 2 月）是最好的方法。下面是一个 vanilla-JS 解决方案，它将响应锚点点击并在加载时解析页面哈希 (See JSFiddle)。如果需要动态计算，请修改.getFixedOffset() 方法。如果你使用 jQuery，here's a modified solution with better event delegation and smooth scrolling.
(function(document, history, location)
var HISTORY_SUPPORT = !!(history && history.pushState);
var anchorScrolls =
ANCHOR_REGEX: /^#[^ ]+$/,
OFFSET_HEIGHT_PX: 50,
/**
* Establish events, and fix initial scroll position if a hash is provided.
*/
init: function()
this.scrollToCurrent();
window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
document.body.addEventListener('click', this.delegateAnchors.bind(this));
,
/**
* Return the offset amount to deduct from the normal scroll position.
* Modify as appropriate to allow for dynamic calculations
*/
getFixedOffset: function()
return this.OFFSET_HEIGHT_PX;
,
/**
* If the provided href is an anchor which resolves to an element on the
* page, scroll to it.
* @param String href
* @return Boolean - Was the href an anchor.
*/
scrollIfAnchor: function(href, pushToHistory)
var match, rect, anchorOffset;
if(!this.ANCHOR_REGEX.test(href))
return false;
match = document.getElementById(href.slice(1));
if(match)
rect = match.getBoundingClientRect();
anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
window.scrollTo(window.pageXOffset, anchorOffset);
// Add the state to history as-per normal anchor links
if(HISTORY_SUPPORT && pushToHistory)
history.pushState(, document.title, location.pathname + href);
return !!match;
,
/**
* Attempt to scroll to the current location's hash.
*/
scrollToCurrent: function()
this.scrollIfAnchor(window.location.hash);
,
/**
* If the click event's target was an anchor, fix the scroll position.
*/
delegateAnchors: function(e)
var elem = e.target;
if(
elem.nodeName === 'A' &&
this.scrollIfAnchor(elem.getAttribute('href'), true)
)
e.preventDefault();
;
window.addEventListener(
'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
);
)(window.document, window.history, window.location);
【讨论】：
效果很好，但对于 jquery 1.7+，使用 $("a").on("click",... 而不是 $("a").live("click",. .. 很好的评论，我会更新 :) - 顺便说一句，它也应该是$("body").on("click", "a"... 因为它可能需要为通过脚本添加到文档中的锚点工作（这就是我使用 @987654326 的原因@)
此外，值得注意的是，这会与其他 href/id 对混淆，如折叠、轮播等……有没有简单的方法解决这个问题？
@tom10 我想你只需要使选择器更具体，或者通过使用a:not(.not-anchor)（或名称不那么容易混淆的东西）将锚列入黑名单，然后确保你的折叠/轮播库添加这些给他们的锚上课。如果您使用的是 jQuery UI 或 Bootstrap，我想他们会添加一些您可以参考的其他类。
如果您连续点击同一个锚点 2 次（从带有锚点链接的菜单中），第二次点击效果不佳。【参考方案9】：
这会从以前的答案中获取许多元素，并组合成一个很小的（194 字节缩小）匿名 jQuery 函数。调整 fixedElementHeight 为您的菜单或阻塞元素的高度。
(function($, window)
var adjustAnchor = function()
var $anchor = $(':target'),
fixedElementHeight = 100;
if ($anchor.length > 0)
$('html, body')
.stop()
.animate(
scrollTop: $anchor.offset().top - fixedElementHeight
, 200);
;
$(window).on('hashchange load', function()
adjustAnchor();
);
)(jQuery, window);
如果你不喜欢这个动画，请替换
$('html, body')
.stop()
.animate(
scrollTop: $anchor.offset().top - fixedElementHeight
, 200);
与：
window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
丑化版：
!function(o,n)var t=function()var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate(scrollTop:n.offset().top-t,200);o(n).on("hashchange load",function()t())(jQuery,window);
【讨论】：
这个解决方案确实帮助了我，但它在 IE9-11 中无法始终如一地工作。有时它有效，但其他一些点击却无效（滚动位置停留在锚点位置）。我完全不知道是什么导致了这个问题。 @Crono1985 您的文档是 HTML 4 还是 5？在 4 中，ID 具有更严格的字符列表，因此它们可能无法注册为有效目标。接下来，您使用的是 ID 还是名称？在 HTML5 中，ID 是所有标签的有效锚点，但名称只能用于链接标签。 非常好！谢谢！唯一的问题是，如果一个人跟随带有片段/哈希的链接（我的意思是 some-page#anchor），它就不能可靠地工作。至少在 Chromium 45.0.2454.101 和 Firefox 上。我不确定它是否可以修复。 @MajesticRa 一个棘手的问题是加载或滚动事件中的操作顺序。如果您的页面在页面加载或滚动后调整布局（例如缩小刊头），则 :target 偏移量的计算可能是错误的。 这解决了我的问题。也许值得将这句话放在答案中。【参考方案10】：这是我们在网站上使用的解决方案。将 headerHeight 变量调整为您的标题高度。将js-scroll 类添加到应在单击时滚动的锚点。
// SCROLL ON CLICK
// --------------------------------------------------------------------------
$('.js-scroll').click(function()
var headerHeight = 60;
$('html, body').animate(
scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
, 500);
return false;
);
【讨论】：
【参考方案11】：这受到 Shouvik 答案的启发 - 与他的概念相同，只是固定标头的大小不是硬编码的。只要您的固定标头位于第一个标头节点中，这应该“正常工作”
/*jslint browser: true, plusplus: true, regexp: true */
function anchorScroll(fragment)
"use strict";
var amount, ttarget;
amount = $('header').height();
ttarget = $('#' + fragment);
$('html,body').animate( scrollTop: ttarget.offset().top - amount , 250);
return false;
function outsideToHash()
"use strict";
var fragment;
if (window.location.hash)
fragment = window.location.hash.substring(1);
anchorScroll(fragment);
function insideToHash(nnode)
"use strict";
var fragment;
fragment = $(nnode).attr('href').substring(1);
anchorScroll(fragment);
$(document).ready(function ()
"use strict";
$("a[href^='#']").bind('click', function () insideToHash(this); );
outsideToHash();
);
【讨论】：
哦 - 此解决方案还假定 id 属性用于锚点，而不是已弃用的 name 属性。 我喜欢这个解决方案，非常模块化且做工精美。哦，我怀念 JQuery 和 DOM 操作的日子 :)【参考方案12】：@Jan 的出色答案的另一个转折是将其合并到使用 jQuery（或 MooTools）的#uberbar 固定标题中。 (http://davidwalsh.name/persistent-header-opacity)
我已经调整了代码，使内容的顶部始终位于固定标题下方而不是下方，并且再次添加了来自@Jan 的锚点，确保锚点始终位于固定标题下方。
CSS：
#uberbar
border-bottom:1px solid #0000cc;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
a.anchor
display: block;
position: relative;
visibility: hidden;
jQuery（包括对#uberbar 和锚方法的调整：
<script type="text/javascript">
$(document).ready(function()
(function()
//settings
var fadeSpeed = 200, fadeTo = 0.85, topDistance = 30;
var topbarME = function() $('#uberbar').fadeTo(fadeSpeed,1); , topbarML = function() $('#uberbar').fadeTo(fadeSpeed,fadeTo); ;
var inside = false;
//do
$(window).scroll(function()
position = $(window).scrollTop();
if(position > topDistance && !inside)
//add events
topbarML();
$('#uberbar').bind('mouseenter',topbarME);
$('#uberbar').bind('mouseleave',topbarML);
inside = true;
else if (position < topDistance)
topbarME();
$('#uberbar').unbind('mouseenter',topbarME);
$('#uberbar').unbind('mouseleave',topbarML);
inside = false;
);
$('#content').css('margin-top': $('#uberbar').outerHeight(true));
$('a.anchor').css('top': - $('#uberbar').outerHeight(true));
)();
);
</script>
最后是 HTML：
<div id="uberbar">
<!--CONTENT OF FIXED HEADER-->
</div>
....
<div id="content">
<!--MAIN CONTENT-->
....
<a class="anchor" id="anchor1"></a>
....
<a class="anchor" id="anchor2"></a>
....
</div>
也许这对喜欢#uberbar fading dixed header 的人有用！
【讨论】：
【参考方案13】：从at this link 给出的答案中借用一些代码（未指定作者），您可以在锚点上添加一个很好的平滑滚动效果，同时使其停在锚点上方 -60 像素处，很好地贴合在固定引导导航栏（需要 jQuery）：
$(".dropdown-menu a[href^='#']").on('click', function(e)
// prevent default anchor click behavior
e.preventDefault();
// animate
$('html, body').animate(
scrollTop: $(this.hash).offset().top - 60
, 300, function()
);
);
【讨论】：
仅供参考：从***.com/questions/9047703/…合并 完整的解决方案还应包括用户加载新页面且地址栏中已有锚点的场景。我试图调整此代码以触发 $(document).ready 事件，但它仍在滚动到文档中的错误位置。有什么想法吗？ 谢谢，这是 twitter bootstrap 用户的解决方案 @AdamFriedman 您是否找到了针对特定场景的解决方案。我使用了一个 Smoothanchor 库，我可以附加一个偏移量，但这也不适用于带有 url 的页面加载。网址#目标【参考方案14】：对于现代浏览器，只需将 CSS3 :target 选择器添加到页面即可。这将自动应用于所有锚点。
:target
display: block;
position: relative;
top: -100px;
visibility: hidden;
【讨论】：
你甚至可以使用:target:before 来创建一个隐藏的伪元素而不是隐藏整个目标。
应该从 IE9 开始支持 :target 选择器，但偏移量仅适用于我网站上的 FF 和 Chrome 和 Safari，不适用于 IE 11。
当您以 HTML5 方式（我也认为是 4 方式）执行操作时，在节或标题等节点中定位 id 属性时，这种方式会导致元素在其上方显示重叠元素。
隐藏:target 在大多数情况下似乎是个坏主意。您授予任何向某人发送指向您页面的链接的人的权力，以选择具有 ID 的任何元素并将其从查看者将看到的页面中删除。在驯服方面，精通技术的恶作剧者可能会注意到这一点并决定从中获得一些乐趣，就像他们曾经通过操纵 URL 来使指向某些新闻网站的链接在 Facebook 上以愚蠢的标题出现的能力一样有趣。更严重的是，如果您的页面上有类似“不要与任何人共享此秘密信息”的消息，则可能是一个安全漏洞。
将此代码添加到样式表对我在我目前正在处理的网站中使用 Chrome 60.0.3112.78 没有任何帮助 - 尽管这很可能是由于交互影响...你能发布一个笔？【参考方案15】：
您可以使用 a[name]:not([href]) css 选择器在没有 ID 的情况下实现此目的。这只是查找具有名称且没有 href 的链接，例如<a name="anc1"></a>
一个示例规则可能是：
a[name]:not([href])
display: block;
position: relative;
top: -100px;
visibility: hidden;
【讨论】：
请注意，在 HTML5 中，a 元素没有 name 属性，所以这不起作用。【参考方案16】：
如果您的锚点是表格元素或在表格（行或单元格）内，则上述方法效果不佳。
我不得不使用 javascript 并绑定到窗口 hashchange 事件来解决这个问题 (demo)：
function moveUnderNav()
var $el, h = window.location.hash;
if (h)
$el = $(h);
if ($el.length && $el.closest('table').length)
$('body').scrollTop( $el.closest('table, tr').position().top - 26 );
$(window)
.load(function ()
moveUnderNav();
)
.on('hashchange', function ()
moveUnderNav();
);
* 注意：hashchange 事件并非在所有浏览器中都可用。
【讨论】：
【参考方案17】：受 Alexander Savin 启发的纯 css 解决方案：
a[name]
padding-top: 40px;
margin-top: -40px;
display: inline-block; /* required for webkit browsers */
如果目标仍然不在屏幕上，您可以选择添加以下内容：
vertical-align: top;
【讨论】：
我刚刚在 Chrome 上尝试过，不需要显示内联块。 @Asrail 对我来说没有它就不行 对我来说，“display: inline-block;”完全破坏了 Chrome 中的功能（所有链接都无法点击）。 a[name] 选择器不应影响链接 仅供参考：从***.com/questions/9047703/…合并【参考方案18】：你也可以使用跟随属性添加锚点：
(text-indent:-99999px;)
visibility: hidden;
position:absolute;
top:-80px;
并给父容器一个相对位置。
非常适合我。
【讨论】：
仅供参考：从***.com/questions/9047703/…合并【参考方案19】：我曾经遇到过类似的问题，不幸的是，在实施了上述所有解决方案后，我得出了以下结论。
-
我的内部元素有一个脆弱的 CSS 结构并实现位置相对/绝对播放，这完全破坏了页面设计。
CSS 不是我的强项。
我写了这个简单的滚动 js，它解释了由于标题引起的偏移，并将 div 重新定位到下面大约 125 像素。请随意使用。
HTML
<div id="#anchor"></div> <!-- #anchor here is the anchor tag which is on your URL -->
JavaScript
$(function()
$('a[href*=#]:not([href=#])').click(function()
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length)
$('html,body').animate(
scrollTop: target.offset().top - 125 //offsets for fixed header
, 1000);
return false;
);
//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1]))
var target = $('#'+location.href.split("#")[1]);
if (target.length)
$('html,body').animate(
scrollTop: target.offset().top - 125 //offset height of header here too.
, 1000);
return false;
);
查看live implementation here。
【讨论】：
这是一个不错的解决方案，对我来说效果很好。 非常非常感谢。又好又流畅。 好的，我得到了将锚名称放入 url 的锚，但我似乎无法让第二部分工作。当我在 url 中打开带有锚点的页面时，它会移动到锚点所在的位置，但不会偏移它。除了 jquery 之外，我还需要其他东西来完成这项工作吗？ @Robbiegod 来抵消只是调整我提到的像素数，scrollTop: target.offset().top - 125 这里的 125 对我有用。根据您的需要对其进行细化。如果您可以发布有关您的问题的示例以进行更多说明，那就太好了。
这很完美！感谢您的代码【参考方案20】：
隐藏的跨度标签与提供导航栏高度的可链接 ID 怎么样：
#head1
padding-top: 60px;
height: 0px;
visibility: hidden;
<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>
这里是小提琴：http://jsfiddle.net/N6f2f/7
【讨论】：
仅供参考：从***.com/questions/9047703/…合并【参考方案21】：改变位置属性的解决方案并不总是可行的（它会破坏布局），因此我建议这样做：
HTML：
<a id="top">Anchor</a>
CSS：
#top
margin-top: -250px;
padding-top: 250px;
使用这个：
<a id="top"> </a>
尽量减少重叠，并将 font-size 设置为 1px。空锚点在某些浏览器中不起作用。
【讨论】：
【参考方案22】：我在每个 h1 元素之前添加了 40px 高度的 .vspace 元素来固定锚点。
<div class="vspace" id="gherkin"></div>
<div class="page-header">
<h1>Gherkin</h1>
</div>
在 CSS 中：
.vspace height: 40px;
效果很好，空间也不拥挤。
【讨论】：
仅供参考：从***.com/questions/9047703/…合并【参考方案23】：我在 TYPO3 网站中遇到了这个问题，其中所有“内容元素”都用以下内容包装：
<div id="c1234" class="contentElement">...</div>
我改变了渲染，所以它呈现如下：
<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>
还有这个 CSS：
.anchor
position: relative;
top: -50px;
固定的顶栏高度为 40 像素，现在锚点再次工作，并从顶栏下方 10 像素开始。
这种技术的唯一缺点是您不能再使用:target。
【讨论】：
其实你可以这样使用 :target ：.anchor:target+div【参考方案24】：
除了 Ziav 的回答（感谢 Alexander Savin），我需要使用老式的 <a name="...">...</a>，因为我们在代码中使用 <div id="...">...</div> 用于另一个目的。我在使用display: inline-block 时遇到了一些显示问题——每个<p> 元素的第一行都略微右缩进（在Webkit 和Firefox 浏览器上）。我最终尝试了其他 display 值，而 display: table-caption 非常适合我。
.anchor
padding-top: 60px;
margin-top: -60px;
display: table-caption;
【讨论】：
仅供参考：从***.com/questions/9047703/…合并【参考方案25】：@AlexanderSavin 的解决方案在我的 WebKit 浏览器中效果很好。
我还必须使用 :target 伪类，它将样式应用于所选锚点以调整 FF、Opera 和 IE9 中的填充：
a:target
padding-top: 40px
请注意，此样式不适用于 Chrome / Safari，因此您可能必须使用 css-hacks、条件 cmets 等。
我还想指出，Alexander 的解决方案之所以有效，是因为目标元素是 inline。如果您不想要链接，您可以简单地更改 display 属性：
<div id="myanchor" style="display: inline">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>
【讨论】：
我的导航项目链接到 h2 元素，这些元素都是 display: block。我正在使用 chrome，我不需要将 h2 设置为 inline 或 inline-block。 @the0ther 我指的是包装元素而不是标题。也很难根据您的文字来想象您的标记。 仅供参考：从***.com/questions/9047703/…合并【参考方案26】：我遇到了同样的问题，最终手动处理了点击事件，例如：
$('#mynav a').click(() ->
$('html, body').animate(
scrollTop: $($(this).attr('href')).offset().top - 40
, 200
return false
)
滚动动画当然是可选的。
【讨论】：
仅供参考：从***.com/questions/9047703/…合并 这个 javascript 甚至无效，我理解您试图传达的信息。但它至少应该有有效的大括号和语法才能成为一个合法的答案。【参考方案27】：正如@moeffju 建议的那样，这可以是achieved with CSS。我遇到的问题（我很惊讶我还没有看到讨论过）是用填充或透明边框重叠先前元素的技巧防止在这些部分的底部悬停和单击操作，因为以下一个在z 顺序。
我发现的最佳解决方法是将部分内容放在div 中，即z-index: 1：
// Apply to elements that serve as anchors
.offset-anchor
border-top: 75px solid transparent;
margin: -75px 0 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
// Because offset-anchor causes sections to overlap the bottom of previous ones,
// we need to put content higher so links aren't blocked by the transparent border.
.container
position: relative;
z-index: 1;
【讨论】：
【参考方案28】：对于同样的问题，我使用了一个简单的解决方案：在每个锚点上放置一个 40px 的 padding-top。
【讨论】：
谢谢，这基本上是我最终做的，但我想知道是否有解决方案来解决添加额外填充可能很尴尬的情况。 仅供参考：从***.com/questions/9047703/…合并以上是关于偏移html锚以调整固定标题[重复]的主要内容，如果未能解决你的问题，请参考以下文章