Ajout d'un décalage automatique à la position de défilement pour tous les liens de hachage / appels

J'ai le problème suivant:

Comme sur Facebook, j'ai une barre de menu en haut de la page est toujours visible (position: fixed;). Quand je clique maintenant de hachage des liens sur ma page (ou de charger une nouvelle page avec un hash de l'url) pour accéder à un certain élément de la page, le navigateur fait toujours cet élément tout en haut de la page, ce qui signifie que l'élément est derrière la barre de menu du haut, par la suite.

J'aimerais ajouter un peu de Javascript (jQuery ou Javascript normale) qui ajoute automatiquement (négatif) de décalage pour cette position de défilement, de sorte que le lié élément est positionné à droite sous la barre de menu supérieure lorsque le lien est cliqué ou le chargement de la page. Mais je ne veux pas d'ajouter des écouteurs d'événement pour tous les liens que prendre soin de cela. J'ai aussi besoin d'une solution qui fonctionne, si la page est chargée avec un hachage partie de l'url à l'aide de la barre d'adresse du navigateur (ou lorsqu'un lien vers une autre page avec un dièse à la fin de l'url).

Vous pouvez trouver un clickdummy de ma page à http://loud.fm/tmp/details.html. Cliquez sur les commentaires de la bulle en haut à droite de l'image sur le côté gauche pour sauter aux commentaires. Si la fenêtre de votre navigateur est assez petit, vous devriez sauter le gris "COMMENTAIRES" de titre et pagination juste avant les commentaires sont énumérés. Je veux le titre et la pagination pour être affiché à droite sous le menu du haut, après le saut lien a été cliqué.

Pouvez-vous m'aider, s'il vous plaît? Merci à l'avance! 🙂

Ce qui concerne,
René

source d'informationauteur René Schubert

  1. 18

    J'ai effectivement trouvé une solution moi-même qui a fonctionné pour moi, en utilisant uniquement css:

    J'ai ajouté un margin-top: -40px; et padding-top: 40px; à l'élément que le saut-du lien pointant vers. Cela fonctionne pour tous les principaux navigateurs: IE (7 à 9), Firefox, Opera, Chrome et Safari.

    Seul problème: Dans le cas où cet élément est après une flottait élément, la marge négative ne fonctionne pas (sens positif rembourrage devient visible). S'il vous plaît commentaire, si quelqu'un connaît une solution pour ce. Je vais mettre à jour mon post alors. Merci!!!!

  2. 3

    À ajouter à la solution sur ce, j'ai trouvé que le réglage de l'affichage pour aucun n'a résolu le problème de padding être visible lorsque utilisées parmi flottait éléments.

    Donc:

    .symbol-target {
    padding-top: 40px;
    margin-top: -40px;
    width: 1px; /* '0' will not work for Opera */
    display: hidden;
}

    J'ai aussi inclus ce style comme un div vide juste au-dessus de mon contenu de la cible.

  3. 2

    Par exemple, considérez D's bootDoc solution qui fonctionne dans tous les principaux navigateurs:

    CSS (insérez votre barre de titre de la hauteur au lieu de 40px):

    .symbol-target {
    padding-top: 40px;
    margin-top: -40px;
    width: 1px; /* '0' will not work for Opera */
    display: inline-block;
}

    HTML:

    <h3>
    <span class="symbol-target" id="myTarget">&nbsp;</span>
    <a href="#myTarget">My text</a>
</h3>

    Réel de la page exemple:

    std.tableau.uninitializedArray dans la documentation en utilisant bootDoc

    Remarque:

    Il ne fonctionne pas pour IE 6.

  4. 2

    J'ai trouvé cette façon d'ajouter un :before dans le css semble bien fonctionner.

    h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

    Plus à CSS Astuces site web

  5. 1

    La chose qui fonctionne le mieux pour moi était de faire ceci:

    1. Donner désignés ID (ce que vous voulez dans l'URL) vers un autre élément à l'intérieur de l'élément requis.
    2. Faire de ce nouveau élément absolu et le déplacer de X pixels au-dessus de l'élément requis, où X est la hauteur de l'en-tête fixe.
  6. 0

    Malheureusement (au moins avec Firefox) ni rembourrage, ni de la marge d'aide ici (en les mettant sur un 'main' div contenant tout, mais la barre de menu); le défilement à un point d'ancrage met toujours tout en haut de la page, les éléments fixes être damné.

    Je pense que vous allez avoir à aller avec votre idée originale, mais n'oubliez pas que par l'aide de la délégation vous pouvez définir simplement un gestionnaire qui va travailler avec tous les liens dans votre barre de menu, y compris ceux ajoutés dynamiquement.

  7. 0

    Essayez de mettre un rembourrage en haut de la page à occuper la zone derrière la barre de menu. Quelque chose comme: padding-top:80px; (au lieu de 80px vous devriez mettre à la hauteur de votre barre de menu).

  8. 0

    Avec javascript, vous pouvez effectuer les opérations suivantes. Il sera à l'écoute d'un événement de clic à toutes les balise d'ancrage et de faire défiler à votre position souhaitée dans la page (C'est à l'aide de jquery):

    /* go to specific position if you load the page directly from address bar */
var navbarHeight = document.getElementById('mynavbar').clientHeight;
function gotoSpecificPosition() {
  if (window.location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - navbarHeight );
  }
}

/* Captures click events on all anchor tag with a hash tag */
$(document).on('click', 'a[href^="#"]', function(event) {
  //Click events are captured before hashchanges. Timeout
  //causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

window.setTimeout(offsetAnchor, 0);

    Le code ci-dessus se charge de toutes les astuces.