I have a certain problem that I do not have the slightest idea how to solve other than using gambiarra to increase the space.
My problem is this:
# to click on a page x go to page y and scroll to the appropriate location. This effect occurs, but ends up cutting the beginning of my text. Would you have a solution for this? I'm using wordpress.
You have a technique, which is not very elegant :
Consists of creating a transparent 1px element 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, but the anchor will be in it giving the distance from the top you need and without "pushing" or opening spaces between the other elements. p>
Here's a practical example for you to understand better:
OBS: I left the comments in the code to facilitate
html {
overflow-y: scroll;
scroll-behavior: smooth;
}
body {
min-height: 2000px;
padding-top: 70px;
}
div#header{
position: fixed;
top:0px;
width:100%;
height:80px;
background: red;
z-index: 999;
}
div#target{
font-size:40px;
border-top:1px solid red;
height: 80px;
}
/* Ancora Oculta - Classe do elemento que vai ser */
#ancora1, #ancora2 {
position: absolute;
width: 1px;
height: 1px;
left: 0;
margin-top: -100px; /* 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;
}<div id="header">
<a href="#ancora1"># Ancora 1 #</a>
<a href="#ancora2"># Ancora 2 #</a>
</div>
<div id="target" style="position: relative;">content!</div>
<div id="target">content!</div>
<div id="target" style="position: relative;">content!</div>
<div id="target">content!</div>
<!-- Elemento com o ID para fazer a Ancora 1 -->
<div id="ancora1"></div>
<div id="target"># Ancora 1 #</div>
<div id="target">content!</div>
<div id="target">content!</div>
<!-- Elemento com o ID para fazer a Ancora 1 -->
<div id="ancora2"></div>
<div id="target"># Ancora 2 #</div>As I said, it's not a very elegant technique, but it can help you without needing JavaScript
You can use a link like this:
<a href="arquivo.html#topico">Link</a>
This link will open the page "file.html" and will take the screen to "topico" (a DIV or P that has the id topico)