CODEWITHSUNDEEP
htmlcssanchoroffset
DuchSuvaa
DuchSuvaa

Reputation: 676

How to apply an offset to a #link on another page

I got a website which basically is 80% index.html plus a few minor subpages. Index.html is divided into few sections. However, the navigation has position:fixed and height of - say - 100px, so links like

<a href="#section">

need a 100px offset. I achieve it through jQuery (ill leave all ifs for specific sections out):

$("#navigation a").click(function() {
    event.preventDefault();
    var offset = $("#section1").offset().top - 100;
    $(window).scrollTop(offset);
}

The problem is that when i navigate to index.html from subpages, this trick won't work, so i must not use this function on subpages and simply "allow default".

Is there a way to navigate to a #section of an other html document with a proper offset (cant be hard coded)?

Upvotes: 3

Views: 2124

Answers (3)

Sigurd Mazanti
Sigurd Mazanti

Reputation: 2395

This is actually doable with pure CSS using scroll-margin-top - markup is taken from the accepted answer on this question.

.sections {
  display: flex;
  flex-direction: column;
  gap: 100vh;
}

.section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dotted red;
  padding: 20px 0;
}

.navbar {
height: 100vh;
}

#target-1 {
  scroll-margin-top: 100px;
}

#target-2 {
  scroll-margin-top: 200px;
}

#target-3 {
  scroll-margin-top: 10vh;
}

#target-4 {
  scroll-margin-top: 300px;
}

#target-5 {
  scroll-margin-top: 0;
}
<div class="navbar">
  <a href="#target-1">To target 1</a>
  <a href="#target-2">To target 2</a>
  <a href="#target-3">To target 3</a>
  <a href="#target-4">To target 4</a>
  <a href="#target-5">To target 5</a>
</div>

<div class="sections">
  <div class="section" id="target-1">
    Target 1
  </div>
  <div class="section" id="target-2">
    Target 2
  </div>
  <div class="section" id="target-3">
    Target 3
  </div>
  <div class="section" id="target-4">
    Target 4
  </div>
  <div class="section" id="target-5">
    Target 5
  </div>
</div>

Upvotes: 0

HamelDev
HamelDev

Reputation: 1

I had a similar issue while I was using sticky position, so I did something like this:

.navbar{
   position: sticky;
   height: 75px;
   width: 100%;
}

.section{
   position: relative;
   padding-top: 75px;
   top: -75px;
}

Now the # anchor should go to the section and have it right below the navbar instead of underneath it.

Upvotes: 0

user8417018
user8417018

Reputation:

You can achieve this without Javascript.

Assumed on the index.html all targets having the class section. With this CSS snippet the fixed navigation does not hide any target.

body {
   padding-top: 60px;
   margin-top: 0px;
}

 #fixed-nav { 
   position:fixed;
   height:50px;
   line-height:50px;
   vertical-align:middle;    
   background:#000;
   top:0;
   left:0;
   right:0;
   color:#FFF;
   padding-left:5px;
}

#fixed-nav a {
  color: white;
  margin-right: 10px;
  text-decoration: none;
}

#sections .section {
  height:400px;
  padding-left:5px;
}

#sections .section:before { 
  display: block; 
  content: " "; 
  margin-top: -60px; 
  height: 60px; 
  visibility: hidden; 
<div id="fixed-nav">
   <a href="#target-1">To target 1</a>
   <a href="#target-2">To target 2</a>
   <a href="#target-3">To target 3</a>
   <a href="#target-4">To target 4</a>
   <a href="#target-5">To target 5</a>
</div>

<div id="sections">
  <div class="section" id="target-1">
    Target 1
  </div>
  <div class="section" id="target-2">
    Target 2
  </div>
  <div class="section" id="target-3">
    Target 3
  </div>
  <div class="section" id="target-4">
    Target 4
  </div>
  <div class="section" id="target-5">
    Target 5
  </div>
</div>

Upvotes: 3

Related Questions