Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years 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 3 years ago.
Example of a heading hidden by the admin bar

Download all attachments as: .zip

Change History (5)

3 years ago

Example of a heading hidden by the admin bar

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

3 years 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
3 years 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:

3 years 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.