Make WordPress Core

Opened 2 months ago

Closed 2 months ago

Last modified 2 months ago

#53788 closed enhancement (duplicate)

Improve anchor link scroll position when logged in

Reported by: mikachan Owned by: 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: 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

Attachments (1)

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

Download all attachments as: .zip

Change History (5)

2 months ago

Example of a heading hidden by the admin bar

#1 @SergeyBiryukov
2 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.

2 months ago

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.

#3 @mikachan
2 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!

#4 @prbot
2 months ago

mikachan commented on PR #1520:

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.