blocks|key|2142500|text|这是一个很糟糕的解决方案，但确实有效，感谢@SteveJenkins提出这个想法，尽管我做了一些调整。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2142501|<a+name="AnchorName"+class="anchor">anchor+text+[invisible]</a>

.anchor+{
+++position:+relative;
+++top:+-[number]px;
+++visibility:hidden;
}|code-block|syntax|javascript|2142502|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Dirty solution for this but does work, thanks @SteveJenkins for coming up with this, though I added a tweak.

<pre><code>&lt;a name="AnchorName" class="anchor"&gt;anchor text [invisible]&lt;/a&gt;

.anchor {
 position: relative;
 top: -[number]px;
 visibility:hidden;
}
</code></pre>

blocks|key|2176825|text|我能够通过将CSS实际应用于锚点来解决这个问题。所以对于锚，我想要这个...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2176826|<a+name="AnchorName"+class="anchor"></a>|code-block|syntax|javascript|2176827|然后在CSS中我会有这样的。|2176828|.anchor+{
+++position:+relative;
+++top:+-[number]px;
}|2176829|请注意，我注意到在不同浏览器中锚点移动的距离存在一些不准确的地方。因此，可能不可能让事情完美地对齐。如果你想让它完美地定位，你可能需要一些花哨的jquery或者其他东西。|2176830|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I was able to solve this by actually applying CSS to the anchor. So for the anchor I would have this...

<pre><code>&lt;a name="AnchorName" class="anchor"&gt;&lt;/a&gt;
</code></pre>

And then in the CSS I would have this...

<pre><code>.anchor {
 position: relative;
 top: -[number]px;
}
</code></pre>

Note that I have noticed some inaccuracies in how far the anchor is moved in different browsers. So it might not be possible to make things align perfectly. You'd probably need some fancy jquery or something if you wanted it to be perfectly positioned.

blocks|key|2142152|text|现在有了CSS3，这就容易多了。详细的解释在这里：https://css-tricks.com/hash-tag-links-padding/，但简短的版本是|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2142153|a::before+{
++++display:+block;
++++content:+"+";
++++margin-top:+-70px;
++++height:+70px;
++++visibility:+hidden;
}|code-block|syntax|javascript|2142154|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/hash-tag-links-padding/^0|P|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

This is much easier now with CSS3. The long explanation is here: <a href="https://css-tricks.com/hash-tag-links-padding/" rel="nofollow">https://css-tricks.com/hash-tag-links-padding/</a> but the short version is

<pre class="lang-css prettyprint-override"><code>a::before {
 display: block;
 content: " ";
 margin-top: -70px;
 height: 70px;
 visibility: hidden;
}
</code></pre>

blocks|key|3811991|text|我遇到了类似的问题，并遇到了这个问题。没有一个答案像我想要的那样工作。我不得不走得更远，并想分享我的发现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3811992|先了解一下上下文。我正在做某种错误解析，它会在HTML呈现的源码查看页面中突出显示有趣的区域。有一个允许快速导航的索引表，它位于固定高度可变的标题中。这就解释了为什么我会出现在这个问题页面上。|3811993|我的问题是，锚点是，在视觉空间中移动和，在周围移动源代码，按锚点的长度移动文本，并扰乱代码格式。我尝试了多种方法，使它不占用空间，但仍然存在于页面中，因此锚点工作。最后，我选择了&#008;，而不是.(根据@noregt的评论)，它将是退格符。|offset|length|style|BOLD|CODE|3811994|每个锚点都像<a+name="[some+unique+name]"+class="anchor">&#008;</a>一样动态生成，然后在fixed+header中引用。|3811995|一点Javascript有助于动态头部高度和锚点定位(抓取所有锚点并动态调整顶部填充)：|3811996|<script+type="text/javascript"></script>|code-block|syntax|javascript|3811997|此解决方案适用于具有可变高度但固定标头的动态生成的锚点。希望这能帮助到其他人。|3811998|entityMap^0|0|0|9|9|J|2|2H|6|2R|1|0|6|1I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@$F|10|G|11|H|I]|$F|12|G|13|H|I]|$F|14|G|15|H|J]|$F|16|G|17|H|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|18|8|@$F|19|G|1A|H|J]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1C|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1D|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|W|$]]

I had a similar problem and came upon this question. No answers were working quite like I wanted. I had to go a bit further and wanted to share my findings.

A bit of context first. I was doing some kind of error parsing which highlights interesting areas into a HTML-rendered sourcecode viewing page. There is an index table allowing for quick navigation, which is in a fixed height-variable header. Which explains why I wound up on this question page.

My problem was that the anchor was taking visual space and moving the sourcecode around, shifting the text by the anchor's length and messing with code formatting. I tried multiple ways to make it NOT take space but still exist in the page so the anchor works. In the end, instead of a <code>.</code>(as per @noregt's comment), I settled for <code>&amp;#008;</code> which would be the backspace character.

Each anchors are generated dynamically like <code>&lt;a name="[some unique name]" class="anchor"&gt;&amp;#008;&lt;/a&gt;</code> and then referenced in the fixed header.

A little bit of Javascript helps with the dynamic header height and anchors positioning (grabs all anchors and adjust the top padding dynamically):

<pre><code>&lt;script type="text/javascript"&gt;&lt;!--
var height = document.getElementById("head").offsetHeight;
var a = document.getElementsByClassName('anchor');
// src: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript
for(key in a) {
 if (a.hasOwnProperty(key) &amp;&amp; /^0$|^[1-9]\d*$/.test(key) &amp;&amp; key &lt;= 4294967294) {
 a[key].style.paddingTop = height + 'px';
 }
}
--&gt;&lt;/script&gt;
</code></pre>

This solution works perfectly for dynamically generated anchors with a variable-height but fixed header. Hope this can help someone else.

blocks|key|3811835|text|添加一个低于200px的隐藏元素，并给它做一个锚点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3811836|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Add a hiden element 200px lower and make an anchor to it instead.

I have an anchor on a element which makes the navigation jump to that point. However the anchor snaps it right up to the top of the viewport. Due do a fixed navigation, it's now hidden behind.

Is it possible to make the anchor not snap to the top of the viewport and instead 200px down the page?

Site here: <a href="http://www.haselden.co.uk/james/docs" rel="noreferrer">http://www.haselden.co.uk/james/docs</a>

Anchor not to top of page, but 200px down

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我在一个元素上有一个锚点，它使导航跳到那个点。但是，锚点会将其捕捉到视口的顶部。由于做了一个固定的导航，它现在被隐藏在后面。有没有可能使锚点不捕捉到视口的顶部，而是向下捕捉页面的200px？点击此处：

问锚点不在页面顶部，而是向下200px
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问锚点不在页面顶部，而是向下200pxEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问锚点不在页面顶部，而是向下200px
EN