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

Forum|Forum|4 years ago
September 7, 2021
1 reply
1018 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_

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>

Nancy OShea

Community Expert

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

GaleodanAuthor

Known Participant

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_Correct answer

Legend

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>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded