Position du déplacement de l'écran du lien d'ancrage

Question

Est-il possible de modifier la position de l'écran lorsque l'on clique sur un lien d'ancrage ? Par défaut, lorsqu'on clique sur un lien d'ancrage, l'écran se déplace de sorte que l'ancre se trouve tout en haut de l'écran. J'aimerais qu'il se décale, mais je ne veux pas qu'il soit entièrement en haut de l'écran, je veux qu'il y ait un certain espace à partir du haut, disons 50px à partir du haut.

Exemple :

<a href="#section1">section 1</a>
<a href="#section2">section 2</a>

....
....

<div id="text">
    <div id="section1">text text text</div>
    <div id="section2">text text text</div>
</div>

Merci.

Answer 1

JavaScript n'est pas nécessaire. Je pense que cela fera ce que vous voulez.

Cette solution vous permet de placer les ancres là où vous souhaitez que l'écran défile jusqu'à une position décalée par rapport à l'ancre spécifiée dans la règle CSS de la classe adjusted-anchor .

<style>

  .anchor-container {
     position:relative;
  }

  .adjusted-anchor {
     position:absolute;
     top: -150px;
  }

</style>

<a href="#anchor">CONTINUED BELOW</a>

...

<div class="anchor-container"><div name="anchor" class="adjusted-anchor"></div></div>
<div>...continued from above</div>

Le décalage est fixe, de sorte que si votre contenu se réaffiche lorsque l'écran est redimensionné, vous devrez travailler avec des pourcentages ou du JavaScript pour répondre au redimensionnement du navigateur.

Answer 2

Option purement CSS sans ajout d'éléments supplémentaires :

a.shifted-anchor {
  display: block;
  position: relative;
  top: -100px;
}

<a name="something" class="shifted-anchor"></a>

Answer 3

Il n'y aura pas de moyen de le faire avec du html pur - vous obtiendrez des résultats différents dans les différents navigateurs.

Jetez un coup d'œil à la fonction window.scrollTo() de javascript.

Answer 4

Une autre option est la suivante :

<style>
div.shifted {padding-top: 70px; margin-top: -70px;}
</style>

<div class="shifted" id="section1">text</div>

Cela fonctionne également si vous avez quelque chose comme un menu positionné de manière absolue en haut de vos pages, ce qui perturbe la position des ancres. Si le menu a une hauteur de 70px, le code ci-dessus fera en sorte que l'ancre affiche le div juste en dessous du menu.

Answer 5

Et si vous avez besoin que toutes les ancres soient plus basses dans la page :

a[id] {
     padding-top: 170px;
     margin-top: -170px;
}

Amusez-vous bien !