Non-header anchor links

user_4759200 0
Viewed 159

We are currently in the process of migration from Confluence to Docusaurus 2. And we have many anchors in Confluence that we cannot reproduce as links to the headers in Docusaurus. For example, we have an anchor link to a specific table row. What options do we have in Docusaurus to create anchor links?

I tried <a id="..."/> html tag to create anchors and it works except that it seems that navbar's height is not taken into account (even with navbar: { hideOnScroll: true }). For example, we have Literals.md page with the table inside:

|Name                              |Example |Class              |...
|----------------------------------|--------|-------------------|---
|<a id="strliteral"/>String literal|`'text'`|`STRING[N]`, `TEXT`|...

And after following the link Literals.md#strliteral the actual position is hidden by the navigation bar:

enter image description here

Is there any possibility to fix this issue with the navigation bar or to use something else to simulate the Confluence anchor feature?

docusaurus confluence
1 Answers

My current solution is to add a css class to the custom.css that takes the navigation bar into account

.lsdoc-anchor {
  display: block;
  position: relative;
  top: calc(var(--ifm-navbar-height)*-1 - 0.5rem);
}

And use it within an html <a> tag when creating anchors

<a className="lsdoc-anchor" id="anchorid"/>
user_47592000
Related