• Resolved chappers1972

    (@chappers1972)


    Hi Tom,

    I have a post with sections that I’ve listed at the top of the post, with each of the list items linked to the the HTML anchor for the corresponding section.

    Each section, of a title and some text, is grouped into a group and the HMTL anchor is set for that group.

    Clicking on the link takes the user to the section, however, it takes the user to about 5-6 lines under the top of the section (group).

    How can I get the link to take the user to the top of the section (group)?

    Thanks,
    Richard.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter chappers1972

    (@chappers1972)

    Hi Tom,

    After a bit of looking around at various technical discussion fora, it seems that the anchor works fine but the header obscures the text.

    There’s a discussion here which suggests there’s (at least one) CSS solution: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header/22655654#22655654

    However, it’s beyond my technical competence!

    Hopefully this is helpful.

    Thanks,
    Richard.

    • This reply was modified 7 months, 2 weeks ago by chappers1972.
    Plugin Author Twentig

    (@twentig)

    Hi Richard,

    Sticky header and anchors links are always complicated. There’s a new CSS property scroll-margin-top, but it’s currently not supported by all Web browsers (Safari and IE11).
    https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/

    This is not something we can globally fix. You can add the following CSS and apply it to all your sections (#Section01 ,#Section01a, …), or create an extra class that you apply to all your sections:

    #Section01,
    #Section01a {
        padding-top: 140px;
        margin-top: -140px;
    }

    Have a nice day.
    Tom

    Thread Starter chappers1972

    (@chappers1972)

    Hi Tom,

    Unfortunately the solution with the padding-top / margin-top swap doesn’t work as it covers over the bottom of the preceding section.

    I looked deeper into the scroll-margin-top CSS and you’re right that it’s not supported on Safari and IE, but there is an alternative that is – scroll-snap-margin-top.

    This is where I found this out: https://www.blindemanwebsites.com/today-i-learned/2020/scroll-margin-top/
    More details on supported versions are here: https://caniuse.com/mdn-css_properties_scroll-margin-top

    The CSS I’ve used is

    #Section01,
    #Section01a,
    #Section02 {
    scroll-margin-top: 5rem;
    scroll-snap-margin-top: 5rem;
    }

    It works perfectly for Chrome, Edge, etc but I can’t get it to work for Safari (even though the Dev Tools Style window in Safari has a tick against scroll-snap-margin-top).

    In the page of the first link, there is the paragraph:

    You would have to use scroll-snap-margin-top instead of scroll-margin-top and this is because Safari has implemented it as part of the CSS scroll snap module, which means it is only to be used with scroll snap containers.

    Do you know what scroll snap containers are?

    Thanks,
    Richard.

    Thread Starter chappers1972

    (@chappers1972)

    Hi Tom,

    I had another look at the padding / margin solution you proposed. It works – sometimes.

    This first example shows that it doesn’t overlap if there is no colour assigned to the background of the group (Section00 to Section01) but does overlap if there is a colour assigned (Section01 to Section02): https://lighterhrstage.wpengine.com/blog/test-post-with-sections-b/

    This second example is a clone of the first with the difference being that the colour has been cleared from the bottom section (Section02) and the overlap does not appear (Section01 to Section02): https://lighterhrstage.wpengine.com/blog/test-post-with-sections/

    This third example is where, somehow, I’ve managed to have sections with different colours and they don’t overlap: https://lighterhrstage.wpengine.com/blog/returning-to-the-workplace-in-2021-key-considerations-for-uk-employers/ I’ve gone through all the settings but can’t see how I made it do it and can’t replicate it.

    Could you have a look to see what’s going on?

    Thanks,
    Richard.

    Plugin Author Twentig

    (@twentig)

    Hi,

    On this page https://lighterhrstage.wpengine.com/blog/test-post-with-sections-b/, the overlap happens because you’ve chosen the green color, which is one of the theme’s predefined colors. Twenty Twenty-One makes the group’s inner container inherit the background color only for the predefined colors. To fix it, either you set a custom color (which you’ve done on your 3rd page) or add the following CSS to remove the inner background color.

    .wp-block-group .wp-block-group__inner-container {
        background-color: transparent !important;
    }

    https://lighterhrstage.wpengine.com/blog/returning-to-the-workplace-in-2021-key-considerations-for-uk-employers To make the last link work, you can add a z-index on the group that contains the table of contents.

    .toc {
        z-index:2
    }

    Hope that helps,
    Tom

    Thread Starter chappers1972

    (@chappers1972)

    Hi Tom,

    Thanks for this. The solutions work for the background colour and ensuring the links are clickable.

    Just a cheeky last question on this topic…

    Rather than using px, I used em, i.e.,

    #Section01,
    #Section01a {
    padding-top: 4em;
    margin-top: -4em;
    }

    Is there any way to use 4em for desktop, laptop and tablet, and 3em for mobile?

    Thanks,
    Richard.

    Plugin Author Twentig

    (@twentig)

    Hi,

    You need to use media queries:

    @media (max-width: 651px) {
    	#Section01,
    	#Section01a {
    	padding-top: 3em;
    	margin-top: -3em;
    	}
    }

    Hope that helps,
    Tom

    Thread Starter chappers1972

    (@chappers1972)

    Thanks Tom. Works perfectly.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘HTML Anchors Jumping Down A Bit Too Far’ is closed to new replies.