Anchor Tag Positioning

  • OscarGuy

    (@oscarguy)


    11 months, 2 weeks ago

    I’m trying to set up some anchor tags within a page to make it easier to navigate. However, when I set up the anchor and click the link, it appears below the content and because my header always stays locked at the top, the section where it re-positions (which has the title of the section), is hidden by the header. Is there a way to set/CSS style a position on an anchor tag so that it shows re-positions to below the header?

Viewing 6 replies - 1 through 6 (of 6 total)
  • George Appiah

    (@gappiah)

    11 months, 2 weeks ago

    There are various strategies to solve this rather common problem. This blog post has a couple of options: https://nicolasgallagher.com/jump-links-and-viewport-positioning/ … but you’ll find a lot more with a simple Google search.

    The modern solution made specifically to solve this kind of problem is scroll-padding-top or scroll-margin-top.

    Of course, any solution has to be adapted to your website’s specific CSS selectors.

    If you could provide your site’s address, maybe a benevolent would can take a look and give you copy-and-paste CSS code adapted to your site.

    Good luck!

    Thread Starter OscarGuy

    (@oscarguy)

    11 months, 2 weeks ago

    Thanks. I don’t actually have a sample set up yet. I’m currently designing a page, so I don’t have anything posted to review.

    Thread Starter OscarGuy

    (@oscarguy)

    11 months, 2 weeks ago

    https://www.cinemasight.com/awards-history/98th-academy-awards-2025/98th-academy-awards-2025-precursor-tallies/

    I put up a test page. I found a plugin to reset positioning but I now have a different problem. Should probably open a new ticket for it but…clicking on a jump link takes you to a spot on a page but does not put the #location in the address bar. That means you can’t use the back button to get to the prior position. I’ve taken that into consideration and built in further jump links in each section but when I click on those, it takes me to the top of the page rather than to the position I intended.

    • This reply was modified 11 months, 2 weeks ago by OscarGuy.
    George Appiah

    (@gappiah)

    11 months, 2 weeks ago

    clicking on a jump link takes you to a spot on a page but does not put the #location in the address bar.

    Unfortunately, I don’t have a solution for this: just a possible hint.

    I’m able to reproduce the effect you’re seeing when I open the page normally, with JavaScript enabled.

    But when I open the page with JavaScript disabled in the browser, the anchor works as expected (ie the URL in the address bar gets updated, and the browser’s BACK and FORWARD buttons work).

    So it’s definitely some JS on the site causing this. But that’s above my pay grade 😀

    Good luck!

    Thread Starter OscarGuy

    (@oscarguy)

    11 months, 2 weeks ago

    Oh. I have no idea what would even be using java…must be a plugin.

    Moderator threadi

    (@threadi)

    11 months, 2 weeks ago

    You are using this plugin, which has a very unique name: https://ww.wp.xz.cn/plugins/hash-link-scroll-offset/ – this causes what you are describing. Deactivate the plugin and it should no longer happen. However, if you want to change the behavior, it is best to contact their support forum.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Anchor Tag Positioning’ is closed to new replies.