Make WordPress Core

Opened 23 months ago

Closed 23 months ago

Last modified 23 months ago

#53788 closed enhancement (duplicate)

Improve anchor link scroll position when logged in

Reported by: mikachan's profile mikachan Owned by: mikachan's profile mikachan
Milestone: Priority: normal
Severity: normal Version: 5.8
Component: Toolbar Keywords: has-patch
Focuses: css Cc:


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:

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

Attachments (1)

anchor link issue.gif (146.1 KB) - added by mikachan 23 months ago.
Example of a heading hidden by the admin bar

Download all attachments as: .zip

Change History (5)

23 months ago

Example of a heading hidden by the admin bar

#1 @SergeyBiryukov
23 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from assigned to closed

Hi there, welcome to WordPress Trac!

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

This ticket was mentioned in PR #1520 on WordPress/wordpress-develop by mikachan.

23 months ago

Trac ticket:

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.

#3 @mikachan
23 months ago

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!

mikachan commented on PR #1520:

23 months ago

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

Note: See TracTickets for help on using tickets.