décalage d'une ancre html pour s'adapter à un en-tête fixe

Question

J'essaie de nettoyer la façon dont mes ancres fonctionnent. J'ai un en-tête qui est fixé en haut de la page. Ainsi, lorsqu'on crée un lien vers une ancre ailleurs dans la page, la page saute pour que l'ancre se trouve en haut de la page, laissant le contenu derrière l'en-tête fixe (j'espère que cela a un sens). J'ai besoin d'un moyen de décaler l'ancre de 25px par rapport à la hauteur de l'en-tête. Je préférerais du HTML ou du CSS, mais du Javascript serait également acceptable.

Answer 1

Vous pourriez simplement utiliser le CSS sans aucun javascript.

Donnez une classe à votre ancre :

<a class="anchor" id="top"></a>

Vous pouvez ensuite positionner l'ancre un peu plus haut ou plus bas que là où elle apparaît réellement sur la page, en en faisant un élément de bloc et en la positionnant de manière relative. -250px positionnera l'ancre plus haut de 250px

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

Answer 2

J'ai trouvé cette solution :

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

Cela ne crée aucun vide dans le contenu et les liens d'ancrage fonctionnent très bien.

Answer 3

Je cherchais également une solution à ce problème. Dans mon cas, c'était assez facile.

J'ai un menu de liste avec tous les liens :

<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>

Et en dessous, les rubriques où il faut aller.

<h3>one</h3>
<p>text here</p>

<h3>two</h3>
<p>text here</p>

<h3>three</h3>
<p>text here</p>

<h3>four</h3>
<p>text here</p>

Maintenant, parce que j'ai un menu fixe en haut de ma page, je ne peux pas le faire aller vers ma balise car elle serait derrière le menu.

Au lieu de cela, j'ai mis une balise span à l'intérieur de ma balise avec l'id approprié.

<h3><span id="one"></span>one</h3>

Utilisez maintenant 2 lignes de CSS pour les positionner correctement.

h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}

Modifiez la valeur du haut pour qu'elle corresponde à la hauteur de votre en-tête fixe (ou plus). Je suppose que cela fonctionnerait également avec d'autres éléments.

Answer 4

Comme il s'agit d'un souci de présentation, une solution purement CSS serait idéale. Cependant, cette question a été posée en 2012, et bien que des solutions de positionnement relatif / marge négative aient été suggérées, ces approches semblent plutôt bricolées, créent des problèmes potentiels de flux, et ne peuvent pas répondre dynamiquement aux changements dans le DOM / viewport.

En gardant cela à l'esprit, je pense que l'utilisation de JavaScript est toujours (février 2017) la meilleure approche. Voici une solution vanilla-JS qui répondra à la fois aux clics des ancres et résoudra le hachage de la page au chargement. (Voir JSFiddle) . Modifiez le .getFixedOffset() si des calculs dynamiques sont nécessaires. Si vous utilisez jQuery, voici une solution modifiée avec une meilleure délégation des événements et un défilement fluide .

(function(document, history, location) {
  var HISTORY_SUPPORT = !!(history && history.pushState);

  var anchorScrolls = {
    ANCHOR_REGEX: /^#[^ ]+$/,
    OFFSET_HEIGHT_PX: 50,

    /**
     * Establish events, and fix initial scroll position if a hash is provided.
     */
    init: function() {
      this.scrollToCurrent();
      window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
      document.body.addEventListener('click', this.delegateAnchors.bind(this));
    },

    /**
     * Return the offset amount to deduct from the normal scroll position.
     * Modify as appropriate to allow for dynamic calculations
     */
    getFixedOffset: function() {
      return this.OFFSET_HEIGHT_PX;
    },

    /**
     * If the provided href is an anchor which resolves to an element on the
     * page, scroll to it.
     * @param  {String} href
     * @return {Boolean} - Was the href an anchor.
     */
    scrollIfAnchor: function(href, pushToHistory) {
      var match, rect, anchorOffset;

      if(!this.ANCHOR_REGEX.test(href)) {
        return false;
      }

      match = document.getElementById(href.slice(1));

      if(match) {
        rect = match.getBoundingClientRect();
        anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
        window.scrollTo(window.pageXOffset, anchorOffset);

        // Add the state to history as-per normal anchor links
        if(HISTORY_SUPPORT && pushToHistory) {
          history.pushState({}, document.title, location.pathname + href);
        }
      }

      return !!match;
    },

    /**
     * Attempt to scroll to the current location's hash.
     */
    scrollToCurrent: function() {
      this.scrollIfAnchor(window.location.hash);
    },

    /**
     * If the click event's target was an anchor, fix the scroll position.
     */
    delegateAnchors: function(e) {
      var elem = e.target;

      if(
        elem.nodeName === 'A' &&
        this.scrollIfAnchor(elem.getAttribute('href'), true)
      ) {
        e.preventDefault();
      }
    }
  };

  window.addEventListener(
    'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
  );
})(window.document, window.history, window.location);

Answer 5

Solution purement css inspirée par Alexander Savin :

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

En option, vous pouvez ajouter ce qui suit si la cible est toujours hors de l'écran :

  vertical-align: top;