Link href to id div

Question

Well I know we can make links by directing the click href for a page id using #.

#content1, #content2, #content3, #content4 {
  height: 50vh;
  border: 1px solid red;
}

<a href="#content1"> CONTEUDO 1</a>
<a href="#content2"> CONTEUDO 2</a>
<a href="#content3"> CONTEUDO 3</a>
<a href="#content4"> CONTEUDO 4</a>



<div id="content1" class="content1">CONTEUDO 1 TEXTO</div>
<div id="content2" class="content1">CONTEUDO 2 TEXTO</div>
<div id="content3" class="content1">CONTEUDO 3 TEXTO</div>
<div id="content4" class="content1">CONTEUDO 4 TEXTO</div>

This way every time you click he’s going to the top 0 px, would have some way of sending it to a different top, because depending on what you have at the top, it will cut a piece of the text.

So the ideal would be to change this top 0, for example to top 5, face click on the link it leads to the top - 5.

Would you have some way of producing that ?

Answer 1

It’s okay that this is not a very "stylish" way, but can solve only with CSS.

The technique is to create an element of 1px and transparent color that will function as a hidden anchor, with the position: absolute vc will take this element out of the page flow and it will not interfere with the other elements. So the anchor will be in this hidden element that is 50px before the content you want to call when you click on the link, changing the value of px you define where the anchor should stop.

OBS: I left commented in the code where you set the time when the anchor should stop before the top of the page

Follow a practical example for you to better understand:

/* casso queira abilitar um scroll suave durante a rolagem de tela
html {
    overflow-y: scroll;
    scroll-behavior: smooth;
} */
body {
    min-height: 2000px;
}
    
.content1 {
    height: 50vh;
    border: 1px solid red;
}
#content1, #content2, #content3, #content4  {
    position: absolute;
    width: 1px;
    height: 1px;
    left: 0;
    margin-top: -50px; /* esse valor varia de acordo com a altura do seu Header, se ele tiver 200px de altura coloque aqui -220px por exemplo */
    background-color: transparent;
    z-index: -1;
}

<a href="#content1"> CONTEUDO 1</a>
<a href="#content2"> CONTEUDO 2</a>
<a href="#content3"> CONTEUDO 3</a>
<a href="#content4"> CONTEUDO 4</a>

<div id="content1"></div>
<div class="content1">CONTEUDO 1 TEXTO</div>
<div id="content2"></div>
<div class="content1">CONTEUDO 2 TEXTO</div>
<div id="content3"></div>
<div class="content1">CONTEUDO 3 TEXTO</div>
<div id="content4"></div>
<div class="content1">CONTEUDO 4 TEXTO</div>

Answer 2

I only know one way to do it with Javascript. I’m using jQuery below for ease.

$('.anchor').on('click', function(event){
  
   event.preventDefault();
   
   var section  = $(this).attr('href');
   var top      = $(section).offset().top - 35;
   
   $('html').scrollTop(top);
});

.content1{
    height: 400px;
    background-color: #000;
    color: #FFF;
    margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#content1" class="anchor"> CONTEUDO 1</a>
<a href="#content2" class="anchor"> CONTEUDO 2</a>
<a href="#content3" class="anchor"> CONTEUDO 3</a>
<a href="#content4" class="anchor"> CONTEUDO 4</a>



<div id="content1" class="content1">CONTEUDO 1 TEXTO</div>
<div id="content2" class="content1">CONTEUDO 2 TEXTO</div>
<div id="content3" class="content1">CONTEUDO 3 TEXTO</div>
<div id="content4" class="content1">CONTEUDO 4 TEXTO</div>