Skip to main content
Galeodan
Galeodan
Known Participant
September 7, 2021
Answered

How do I hyperlink to a point 70px above an Anchor?

  • September 7, 2021
  • 1 reply
  • 1019 views

My page has a sticky menu. Let's say it occupies the top 70px of the screen. To hyperlink to a particular heading, I have to set the anchor 70mm above the heading so the heading is not hidden by the menu. I can do this easily by inserting a 70px high <div> between the anchor and the heading I want to display. But this means I have a 70px space in the page which doesn't look great, especially on mobile. Is there a smarter way to jump to a point 70px above my anchor so I don't leave big gaps everywhere? Or jump to the anchor and auto-scroll up 70px to reveal the heading?

    This topic has been closed for replies.
    Correct answer osgood_
    quote

     

    I'm not sure how that helps. It moves all content down 70px down and leaves a 70mm gap at the top of the page, above the header and menu. If body padding was a solution, it would not work for mid-page anchors. (The first "70mm" was a typo)


    By @Galeodan

     

     

    I'm assuming you have some content before the sticky position takes effect when the page is scrolled and the navigation reaches the top of the browser window, otherwise the padding-top on the body suggestion should work IF the navigation was sticky by default.

     

    Try the below (not quite sure what browsers support 'behavior: smooth' that seems to be a bit vague when you try and look it up on the 'can I use' website.

     

    <script>
const topLinks = document.querySelectorAll('#mySubnav a[href^="#"]');
topLinks.forEach(link => {
link.onclick = function(event) {
event.preventDefault();
let anchorHash = this.getAttribute('href');
let scrollTo = document.querySelector(anchorHash);
let offsetTopPosition = 100;
let elementPosition = scrollTo.offsetTop;
let offsetPosition = elementPosition - offsetTopPosition;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
};
});
</script>

     

     

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 7, 2021

    To give some breathing room to your page, add CSS padding-top: 70px to your body selector. 

     

    MM & CM are print measures, not digital screen measures.

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    Galeodan
    GaleodanAuthor
    Known Participant
    September 8, 2021
    quote

    To give some breathing room to your page, add CSS padding-top: 70px to your body selector. 


    By @Nancy OShea

     

    I'm not sure how that helps. It moves all content down 70px down and leaves a 70mm gap at the top of the page, above the header and menu. If body padding was a solution, it would not work for mid-page anchors. (The first "70mm" was a typo)

    O
    osgood_
    Legend
    September 10, 2021

    Thanks for that example. I have been actually inserting a 70px high <div> to make space.

                <a id="whereweare"></a>
            <div style="height: 70px"></div>
            <h2>Where We Are</h2>

    So the top of screen jumps to a line 70px above the heading. Once I had it working I was planning to move the height-style to the css file and then have something like <div class="offset-70"><div> . But adding padding is a much tidier solution. As you suggest, I could add that to all h2's or make a class to add it to any element that I was jumping to. The reason I was looking for a way to jump to the anchor and then move up 70px (to reveal it below the sticky menu) was that I wanted to avoid all that empty space at the top of each anchor/section. 

     

    I have a couple of observations regarding the smooth-scrolling, which I had not tried before.

     

    It does has the benefit of showing the reader that they are moving up or down within the same page to get to these headings, as opposed to jumping to a separate page. But, I find that with smooth-scrolling, there can be a significant delay between the page loading and the buttons starting to work. So the first one or two times I click, nothing happens. I don't know if that's because of the type of content, or the amount of content in the page.

     

     

     

     

     


    Any reason you have not tried the solution I provided?

     

    If you add the ids to your h2 headings it should work as you require.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices