在HTML中设置自定义锚点 [英] Setting custom anchor point inside of HTML

问题描述

我已经看到这个主题在这里和在这里，但他们真的不帮我。这种情况是相当类似的：滚动页面和页面顶部的粘性菜单栏（固定div），锚点分散在长滚动文本中。

类似这样的HTML：

 < a name =hd1class =anchor>< h1> Heading Foo< / h1>< / a> 
< p>这是一些文字，很多是
 ... 
< a href =＃hd1>跳转到Heading Foo< / a> 
 ... 
< a name =hdxclass =anchor>< h1> Heading Bla< / h1>< / a> 
< p>，然后有更多文字
 ... 
< a href =＃hdx>跳转到Heading Bla< / a> 
 ... 
  

使用一些CSS，因为现在，

  .anchor {
 color：green; 
} 
  

查看现在，只要我点击一个链接，就可以看到它是如何工作的。

带我到锚点。 （Yay！）唉，这也意味着锚点，现在在页面的顶部，被粘性菜单覆盖。

我尝试过的解决方案是在下面的 其他职位也无济于事。例如，在锚点周围添加填充实际上会在文本中添加可见的填充，并创建空白空间;这不是我想要的。

提前感谢提示和提示： - ）

编辑：我应该让它更清楚一点。我不不需要在页面顶部有空间。我需要每个锚点在下面菜单栏。

解决方案

p>感谢您的投入，我发现了一个基于此的工作解决方案讨论。从那里的提示是空锚;

更改为空锚

 < a name =hdxclass =anchor>& nbsp;< / a>< h1> Heading Bla< / h1> 
  

允许我在页面上移动锚点，而不影响任何（可见）文本流。因此，锚的CSS现在变成

  .anchor {
 position：relative; 
 top：-35px; / *取决于粘性菜单的大小* / 
} 
  

标题的锚定位于标题之上，并且跳转到该锚定会导致标题显示在 下面。

我已更新小提琴以正常工作。 （两个东西：锚点使用A1，..文本显示他们的位置，但是你可以清空它们。另外，我不得不显式关闭< p> position：relativeworks ok。）

I have seen this topic somewhat covered in posts here and here, but they don't really help me out. The situation is fairly similar though: a scrolling page and a sticky menu bar (fixed div) at the top of the page, with anchor points scattered through the long scrolling text.

Something like this HTML:

<a name="hd1" class="anchor"><h1>Heading Foo</h1></a>
<p>this is some text, and a lot of it
...
<a href="#hd1">jump to Heading Foo</a>
...
<a name="hdx" class="anchor"><h1>Heading Bla</h1></a>
<p>and then there is more text
...
<a href="#hdx">jump to Heading Bla</a>    
...

with some CSS that, for now, is empty because I still just stumble around this issue

.anchor {
  color: green;
} ​

Take a look at this fiddle to see how it works at the moment.

Now, whenever I click on a link it takes me to the anchor. (Yay!) Alas, this also means that the anchor, now at the top of the page, is covered by the sticky menu. (Nay!) It would be great if it would show below the sticky menu.

I've tried the solutions that were given in the other posts to no avail. For example, adding padding around the anchor does actually add visible padding in the text and create empty space; which is not what I want. The text ought to appear unmodified visually.

Thanks in advance for hints and tips :-)

EDIT: I should make it a little more clear. I do not need space on top of the page. I do need every anchor point to be below the menu bar. Try my original fiddle, and click the anchors: you will see how they are positioned so that they are covered by the menu bar.

解决方案

Thanks for the input, and I found a working solution based on this discussion. The hint from there was "empty anchors"; on my original fiddle the anchors enclosed the heading and that prevented me from positioning the anchors.

Changing to empty anchors

<a name="hdx" class="anchor">&nbsp;</a><h1>Heading Bla</h1>

allows me to move the anchors on the page without affecting any of the (visible) text flow. So the CSS for the anchors now becomes

.anchor {
  position: relative;
  top: -35px;  /* depending on the size of the sticky menu */
}

That way, the anchor for a heading is positioned above the heading, and jumping to that anchor causes the heading to show up below the menu bar.

I've updated the fiddle to work correctly. (Two things: the anchors use A1, .. text to show their position but you can empty them. Also, I had to explicitly close the <p> tags to ensure "position:relative" works ok.)

这篇关于在HTML中设置自定义锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！