[BUG] Anchor link targets "hide" under menu bar

[rmunn]

Describe the bug

When you click on an anchor link using the double-hash feature, the browser scrolls the anchor link location to the top of the visible window, where it promptly gets hidden by the (relatively new) menu bar. Depending on how the anchor was created (separate <a id="foo"></a> tag above the header vs directly-embedded id attribute like <h2 id="foo">Header</h2>), the header text can either be partially visible, or entirely hidden by the menu bar!

To Reproduce

Steps to reproduce the behavior:

1. Import the "Anchor Links in HTML" tiddler from #5149
2. Click on the "What do they do?" link in its table of contents
3. Note how the menu bar partially overlaps the header text
4. Click on the "More examples" link in the table of contents
5. Note how the menu bar totally hides the header text

Expected behavior

The header text is positioned below the bottom menu bar, not hidden underneath it.

Screenshots

Current behavior:

What it should look like:

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox
• Version: 81

Will probably occur will all standards-compliant browsers.

Additional context

This is a known issue that lots of web developers have hit at one point; see https://css-tricks.com/hash-tag-links-padding/ and https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors for example.

Suggested fix

The best approach is probably to use the :target CSS pseudo-selector and apply a combination of a transparent top border and negative top margin, both set to the same height as the height of the menubar.

Alternatively, the pseudo-element technique might work, but that won't combine with the :target pseudo-selector and would require setting a class on the anchor target elements (which would be best done by creating an <<anchor-target>> macro).

[rmunn]

@BurningTreeC - As the person who did the menubar work, you're probably going to be interested in this issue.

[BurningTreeC]

Hi @rmunn , the menubar is actually a plugin made by @Jermolene . I just did some CSS work

[Jermolene]

The best approach is probably to use the :target CSS pseudo-selector and apply a combination of a transparent top border and negative top margin, both set to the same height as the height of the menubar.

I've used this technique in the past, and it certainly might be worth experimenting to apply it here. The trouble is, of course, that the height of the menubar is only conveniently accessible in JavaScript (see https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/utils/dom/scroller.js#L73-L77 for how we use when we do native TW navigation).

Parenthetically, working on the menubar plugin was the final straw for me with the current layout. So many fiddly, brittle little dependencies, with very little encapsulation. I'm hoping to get the flexbox layout I've been exploring in #4473 out soon after v5.1.23.

[rmunn]

I've played with the demo layout from https://github.com/Jermolene/TiddlyWiki5/issues/4473#issuecomment-598181323 and I already love it. This would be my vote for a top-priority item for TiddlyWiki 5.1.24 (though it might be a big enough change to warrant a 5.2.0 version number): being able to control the number of left/right/top/bottom sidebars, and/or have multiple story rivers open at once, would enable so many new use cases that nobody has even thought of yet. Although it may be a challenge converting all the legacy layout code to the new layout, I think the "win" that it will give will make that work worth it in the end.

Edit: I can already think of several things I could do with that layout in my "Game Master's helper" project for tabletop role-playing games. A button to "pin" certain tiddlers to a particular sidebar would let you always have the player character's most important stats visible for handy lookup. Another sidebar, or a second story river, could hold frequently-consulted tables, or the current state of combat (initiative scores for all the characters in the fight, what long-term effects are in play and what round each of them will expire, etc), and so on. There's so much potential for the end user to "pin" his/her most useful tiddlers to be visible at all times, and create a layout that most benefits his/her particular workflow.

[CodaCodr]

Just picked up on this via TalkTW.

I think css scroll-margin-top applies here. Set it to the height of the top menu bar or, use a css var(--variable).

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top