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

Explorer ,
Sep 07, 2021 Sep 07, 2021

Copy link to clipboard

Copied

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?

Views

136

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 08, 2021 Sep 08, 2021
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 stic

...

Likes

Translate

Translate
Adobe Community Professional ,
Sep 07, 2021 Sep 07, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 07, 2021 Sep 07, 2021

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

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>

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

quote

I'm not sure how that helps. It moves all content down 70px. 

===============

We can't be expected to guess what you've actually got going on. For better answers, please post a link to your live site.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 09, 2021 Sep 09, 2021

Copy link to clipboard

Copied

quote
quote

I'm not sure how that helps. It moves all content down 70px. 

===============

We can't be expected to guess what you've actually got going on. For better answers, please post a link to your live site.

 

By @Nancy OShea


Sorry I didn't explain more clearly that I am jumping to anchors at headings that are in  the body of the page - Not to another page, or the top of the same page. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 09, 2021 Sep 09, 2021

Copy link to clipboard

Copied

Assuming you have h2s  inside unique section IDs as in my example, simply add ample wiggle room to section and H tags.

 

image.png

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smooth Scroll Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { scroll-behavior: smooth; }
body {
width: 75%;
margin: 0 auto;
background-color:tan;
}
nav {
position: sticky;
top: 0;
background-color:aliceblue;
padding: 2%;
font-size: 1.55rem;
}
section {
min-height: 400px;
padding:2%;
}
section h2 {padding-top:70px;}

#section1 { background-color: palegoldenrod; }
#section2 { background-color: paleturquoise; }
#section3 { background-color: lightgreen }

</style>
</head>
<body>

<h1>Smooth Scroll Demo</h1>
<p>Click links below to scroll</p>
<nav>
<a href="#section1">Link 1</a>&nbsp;|&nbsp;
<a href="#section2">Link 2</a>&nbsp;|&nbsp;
<a href="#section3">Link 3</a>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
<hr>
<section id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima </p>
</section>
<hr>
<section id="section3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
<hr>
<section>
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
<hr>
<section>
<h2>Section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, voluptatem id ut. Commodi sint sapiente beatae reprehenderit. Possimus itaque illo, dignissimos aspernatur modi blanditiis ducimus necessitatibus alias, unde eaque sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, voluptatem id ut. Commodi sint sapiente beatae reprehenderit. Possimus itaque illo, dignissimos aspernatur modi blanditiis ducimus necessitatibus alias, unde eaque sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, voluptatem id ut. Commodi sint sapiente beatae reprehenderit. Possimus itaque illo, dignissimos aspernatur modi blanditiis ducimus necessitatibus alias, unde eaque sit.</p>
<hr>
<footer>Footer goes here</footer>
</body>
</html>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 09, 2021 Sep 09, 2021

Copy link to clipboard

Copied

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.

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

quote

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.


By @osgood_

The first time I tried it nothing happened. So I was scouring the details trying to figure out if I had a typo, changing the script etc. to try and make it work, without luck. So I decided I should publish the complete page, so you could see it in context. But when I inserted the code this time, it worked (even without adding the id to the h2 headings) . I have no idea why - Maybe something to do with how I cut and pasted it. So now I am going to incorporate it in all the pages that have internal hyperlinks as I would rather not have excess space between sections. I will mark this question as solved, thanks.

 

PS - In my Reply to Nancy (above) I mentioned that with smoothscrolling on (for the whole page)  the internal  links were inactive for some time. Now, if I deactivate smoothscrolling for the page and have it only in the script, there does not seem to be the same delay in the button's function. I'm not 100% sure of this because I haven't tried it both ways on the same page.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

LATEST
quote

 

it worked (even without adding the id to the h2 headings) . I have no idea why -

 

 

It will work if you have left the anchor tags with the ids above the h2 tags BUT I would just get rid of the anchor tags and put the ids directly on the h2 headings, you dont really want unecessary code as it bloats your page.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines