Anchor Links/Jump Links – Just Going Too Far

  • Resolved amurigate

    (@amurigate)


    2 years, 6 months ago

    Hi, I used the block editor feature to create an anchor link to jump to a specific headline, and it works, but the problem is that it’s off like throwing a dart a dart board and not quite hitting bullseye. What it does is overjumps i.e. it jumps below the headline, so it doesn’t even show the headline that I want it to jump to, just jumps right past it. Is there any way to make it jump before it and not under it?? And yeah, I know that a visitor can just scroll up a bit, but why should they have to? And some won’t even think to do so. Maybe this sounds like a small issue to some, but I like specificity. I f I set it to jump to a specific headline, I want it to jump to the headline, not past it or around it. I’ve tried a lot of things to try to tweak it, but the only thing that works is me putting a big spacer before the headline and setting it to jump to that instead, but that big space doesn’t look right at all. It’s just a weird problem that shouldn’t even be happening. Hopefully someone has a solution for this. Thanks in advance for any help.

    • This topic was modified 2 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 7 replies - 1 through 7 (of 7 total)
  • George Appiah

    (@gappiah)

    2 years, 6 months ago

    What’s the URL of the page where the problem is occuring?

    Thread Starter amurigate

    (@amurigate)

    2 years, 6 months ago

    Hi George,

    Thanks for replying. It’s a site that I’m working on and I don’t have permission to share the link publicly at this time. But I’ve tested the block builder anchor links with multiple themes, and the problem is always the same: it jumps under the headlines instead of right at it or above it. So the issue can easily be reproduced as it’s definitely not an isolated situation.

    rickymccallum87

    (@rickymccallum87)

    2 years, 6 months ago

    I agree with you that this is a common problem. First be sure to rule out the WordPress admin bar obscuring your headers. For visitors who are not logged in your anchor link position will look different because they have no admin bar at the top.

    If you still want to tweak the positioning, I found an article with a CSS fix.
    https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

    You can add this CSS into your Customizer for an extra anchor offset of 50px. Change it as desired, keeping height and margin-top in sync (30px and -30px, 80px and -80px, etc).

    :target::before {
  content: "";
  display: block;
  height: 50px;
  margin-top: -50px;
}
    George Appiah

    (@gappiah)

    2 years, 6 months ago

    I agree with you that this is a common problem. First be sure to rule out the WordPress admin bar obscuring your headers. For visitors who are not logged in your anchor link position will look different because they have no admin bar at the top.

    It may be a common problem, but it is very unlikely that WordPress itself is causing this, especially for visitors. That’s why I asked to see the site.

    A common cause of this for visitors, as the article you linked to mentioned, is fixed or sticky headers. I’ve dealt with so many such cases here in the WordPress forums.

    Also, the solution the article gave was copied from a Stack Overflow Q&A which was originally written in 2001, and may not work with modern display options like flex. It also requires knowing the height of whatever is causing the problem, and this height may not always be known or fixed for all pages.

    Today, a simpler solution is to use the single CSS property scroll-margin-top (or the padding equivalent).

    Here’s MDN’s documentation and current browser support.

    Thread Starter amurigate

    (@amurigate)

    2 years, 6 months ago

    @rickymccallum87 Thanks for the info. Tried it, got it to work, but only by adding both equal positive numbers for height and margin-top. Only problem that I found was that it left huge background padding which didn’t look right, so I couldn’t use it.

    @gappiah Thanks for elaborating on that. I hear what you’re saying, but I’ve seen this exact same issue even on clean WP installs (sticky header or not), so it’s definitely not an isolated situation. However, I do understand that the solution for this issue could vary from site to site, so here’s the URL of the site in question: bulkcomments.net

    There’s a blue button towards the middle of the page that says “OK I get it Boost My Site”, and if you click on it you will see that it jumps right past the “Affordable Packages” heading. Note: you’ll find similar anchor links on the other pages of the site that behave in the same manner. Hope to hear back from you soon.

    • This reply was modified 2 years, 6 months ago by amurigate.
    • This reply was modified 2 years, 6 months ago by amurigate.
    rickymccallum87

    (@rickymccallum87)

    2 years, 6 months ago

    @gappiah I hadn’t come across scroll-margin-top. Thank you for sharing!

    @amurigate Here’s a quick video summary of the CSS property scroll-margin-top. This rule should be a great catch-all for your site. Your fixed header is 160px most of the time, so 200px accounts for that and gives a little breathing room above your anchor targets.

    [id] {
  scroll-margin-top: 200px;
}
    Thread Starter amurigate

    (@amurigate)

    2 years, 6 months ago

    Works great, thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Anchor Links/Jump Links – Just Going Too Far’ is closed to new replies.