Improve anchor link scroll position when logged in

[mikachan]

When logged in and clicking on an anchor link, the admin bar displays over the top of (and therefore hides) the heading or top of the content of the scrolled-to element. Depending on the font size, line height etc, this may hide an entire heading tag.

This seems to affect all themes and as it's caused by the height of the admin bar, it felt appropriate to create a ticket in core.

This was originally highlighted in this issue: ​https://github.com/Automattic/themes/issues/3145

This has been tested on Blockbase, empty theme, and Twenty Twenty.

Steps to reproduce:

• Create a post/page with an anchor link to an element that requires the page to scroll the distance of the viewport height in order to bring it into the viewport.
• View the post/page on the front end while still logged in
• Click the anchor link to make the page scroll to the element
• The top of the content will be hidden underneath the admin bar

[mikachan]

Example of a heading hidden by the admin bar

[SergeyBiryukov]

Hi there, welcome to WordPress Trac!

Thanks for the report, we're already tracking this issue in #46371.

Trac ticket: https://core.trac.wordpress.org/ticket/53788

This adds scroll-margin-top to all elements with an id in .entry-content. This is to improve the scroll position from an anchor link, to ensure the scrolled-to position considers the height of the admin bar when logged in.

I wasn't sure which CSS file to add this to, so I've chosen admin-bar.css as that felt like the closest fit.

Here's the ​browser support for scroll-margin-top.

[mikachan]

Hi @SergeyBiryukov! Ah I'm sorry, I did search for an existing issue but I didn't find that one you linked to. Thank you!

Sorry all, I didn't realise this was already being tracked. Closing as it's a duplicate of #782.