Link href to id div

Question

Link href to id div

Navigation

#1 by (5 votes)
#2 by (3 votes)

4

I know that we can make links by directing click href to an id of the page 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>

In this way everytime you click it, you are going to top 0 px , you 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 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 any way to produce this?

html html5 css css3

asked by anonymous 13.09.2018 / 15:11

2 answers

3

I only know in a way doing with Javascript. I'm using jQuery below to make it easier.

$('.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><ahref="#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>

13.09.2018 / 15:30

How do I open a list of the "Queries SQL" category with VBA? Select Float Mysql

score 5 · Accepted Answer

Okay, that's not a very "fancy" way, but it can only work with CSS.

The technique is to create an element of 1px and transparent color that will act as a hidden anchor, with position: absolute you will remove this element from the page flow and it will not interfere with the other elements. Then 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 that px value you define where the anchor should stop. OBS: I've commented on the code where you set the height at which the anchor should stop before the top of the page

Here is a practical example for you to understand better:

/* 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>