the anchorjump crops off the top of the page-CodePudding

I'm having a problem with my website, at the top of my page i made a list/menu with links, when you press the link the page jumps down to the topic you want, but the problem is when you press the link it crops off the top of the page, so you can't see the top 200px. How do I fix this? And why does it do that in the first place? I can see when you press the link the URL changes to "/#jump1" at the end.

This is the HTML:

<ul id="js-menu"> <li id="menu-li-1"><a href="#jump-2">Tema 2</a></li> <li id="menu-li-2"><a href="#jump-3">Tema 3</a></li> <li id="menu-li-3"><a href="#jump-4">Tema 4</a></li> <li id="menu-li-4"><a href="#jump-5">Tema 5</a></li> <li id="menu-li-5"><a href="#jump-6">Tema 6</a></li> </ul>

and this is how the #jump is applied:

<h2 id="jump-3">Tema 3</h2>

I tried searching on the web to find answers, but i have not found it... Please help.

CodePudding user response：

This happens when your nav has a sticky or fixed position. You can fix it with scroll-padding-top or scroll-margin-top property in css.

The scroll-padding-top property is applied to the parent container and acts just like a CSS top padding, defining offsets from the top of the scrolling area. The scroll-margin-top property should be applied to each anchor section. Like:

nav {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 60px;   <--- Value for scroll-margin-top property
  background: #F4F2F3;
}
section {
  width: 100vw;
  height: 100vh;
  scroll-margin-top: 60px;  <--- Value from nav height
  padding: 1rem;
}

Here:

body {
  margin: 0;
  padding: 0;
}
nav {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 60px;
  background: #F4F2F3;
}
ul {
  width: 100vw;
  height: 60px;
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
}
li {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
a {
  color: #656256;
  text-decoration: none;
}
section {
  position: relative;
  width: 100vw;
  height: 100vh;
  scroll-margin-top: 60px;
  padding: 1rem;
  color: #FFFFFF;
}
#anchor-1 {
  background: #D3B88C;
}
#anchor-2 {
  background: #9EBC9F;
}
#anchor-3 {
  background: #656256;
}

  <nav>
     <ul>
        <li><a href="#anchor-1"> Menu link with anchor 1 </a></li>
        <li><a href="#anchor-2"> Menu link with anchor 2 </a></li>
        <li><a href="#anchor-3"> Menu link with anchor 3 </a></li>
     </ul>
  </nav>
  <section id="anchor-1"> Section 1 </section>
  <section id="anchor-2"> Section 2 </section>
  <section id="anchor-3"> Section 3 </section>

CodePudding user response：

Just take the time and find the solution yourself. There are countless options from CSS to JS, but here are some that you can give a try.

Easiest solution:

#jump-3 {
   padding-top: 50px; /*height of your navbar*/
   margin-top: -50px;
}

Another solution, taken from here, @LGT:

html {
  height: calc(100vh - 84px); /* Fix the height. The 84px here is the height of your nav. */
  margin-top: 84px;
  overflow: hidden; /* Don't scroll. */
}

body {
  height: 100%; /* Set the height to that of html. */
  overflow-y: auto; /* Draw a vertical scrollbar when needed. */
}

Another solution:

#jump-3:target {
    padding-top: 50px; /*height of your navbar*/
} 
/*:taget pseudo class is used when user accesses the selected tag using href*/