Div ancres de défilement trop loin

Je suis en utilisant une statique de la barre en haut de mon site, à propos de 20px de hauteur. Lorsque je clique sur un lien vers une ancre(pour ceux qui ne le savent pas, la navigation sur wikipédia fonctionne comme ça. Cliquez sur un titre et le navigateur va vers le bas) de la partie de le texte disparaît derrière la barre du haut.

Est-il un moyen pour arrêter cela? Je ne suis pas dans une position où je peux utiliser un iFrame. Onlything je pense est de le faire défiler en arrière un peu à chaque fois, mais est-il une autre voie? Un peu de CSS réglage de manipuler le corps ou quelque chose?

  • Le code sera utile.
  • Je vous laisse le iframe hors de question, cela fait plus de confusion.
  • "Est-il une autre voie?" Oui, l'utilisation de JavaScript pour modifier le navigateur par défaut de comportement. Par défaut, le point d'ancrage n'est pas trouve dans la vue assez loin.
  • Double Possible de le Fixe en-tête de page les chevauchements dans les pages ancres
InformationsquelleAutor Koen027 | 2012-07-16
  1. 6

    Pour corriger cela avec CSS, vous pouvez ajouter un rembourrage pour les Éléments que vous souhaitez passer à:

    Exemple

    Alternativement, vous pouvez ajouter une bordure:

    CSS:

    div{ 
  height: 650px; 
  background:#ccc; 
  /*the magic happens here*/
  border-top:42px solid #fff;
}
ul{
  top: 0; 
  width: 100%; 
  height:20px; 
  position: fixed; 
  background: deeppink; 
  margin:0;
  padding:10px; 
}
li{
  float:left;
  list-style:none;
  padding-left:10px;
}
div:first-of-type{ 
  margin-top:0; 
}

    HTML:

    <!-- content to be placed inside <body>…</body> -->
<ul>
  <li><a href="#s1">link 1</a>
  <li><a href="#s2">link 2</a>
  <li><a href="#s3">link 3</a>
  <li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>

    Cependant, ce n'est pas toujours le cas.

    Pour une solution d'activer javascript, vous pouvez utiliser une cliquez sur l'événement attaché à l'ancrage des éléments qui permet de faire défiler un montant corrigé de pixels comme suit:

    JS:

    document.querySelector("a").addEventListener("click",function(e){
    //dynamically determining the height of your navbar
    let navbar = document.querySelector("nav");
    let navbarheight = parseInt(window.getComputedStyle(navbar).height,10);
    //show 5 pixels of previous section just for illustration purposes 
    let scrollHeight = document.querySelector(e.target.hash).offsetTop - navbarheight - 5;
    /* scrolling to the element taking the height of the static bar into account*/
    window.scroll(0,scrollHeight);
    /*properly updating the window location*/
    window.location.hash = e.target.hash;
    /* do not execute default action*/
    e.preventDefault();
});

    CSS:

    nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:40px;
  text-align:center;
  background:#bada55;
  margin:0;
}
a{
  display:block;
  padding-top:40px;
}
#section1{
  height:800px;
  background:repeating-linear-gradient(45deg,#606dbc55,#606dbc55 10px,#46529855 10px,#46529855 20px);
}
#section2{
  height:800px;
  background:repeating-linear-gradient(-45deg,#22222255,#22222255 10px,#66666655 10px,#66666655 20px);
}

    HTML:

    <nav>static header</nav>
<a href="#section2">jump to section 2</a> 
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>

    • Quel événement que je devrais joindre? Veuillez fournir des jQuery exemple.
    • J'ai pensé à elle en jQuery stackoverflow.com/a/50690779/722796 pas de rembourrage nécessaire, il suffit de ne pas faire défiler trop loin. Le rembourrage est la mauvaise solution, car il risquerait de rompre le web design.
    • Tout d'abord, si vous lisez bien la question, OP n'incluent pas le JS tag, c'est pourquoi j'ai donné un CSS tout d'abord la solution (c'est ce qu'il est explicitement mentionner). Aussi, je ne vois pas pourquoi le rembourrage doit "casser" l'optimisation de la conception web. Deuxièmement, j'ai également fournir une description concise javascript solution, alors quelle est la raison de la downvote?
    • Je suis désolé mais je n'accepte pas le rembourrage est une solution acceptable. Par exemple, à l'aide d'un populaire Envato thème, tous mes ancres affichage 90 pixels trop haut sur l'écran (titres complètement caché sous une barre de navigation) et, si vous essayez d'ajouter 90 pixels pour chaque ancre, il semble éteint. Je pense que la plupart des concepteurs seraient d'accord, ce serait une approche musclée. Z-indexé navbars sont populaires maintenant. J'ai rencontré ce problème plusieurs fois avec différents modèles et il serait trop de rembourrage. Franchement, je considère que c'est un bug lié au navigateur. Le navigateur devrait être responsable pour savoir si un point d'ancrage est caché sous une barre de navigation.
    • Je tiens également à souligner, même en l'absence de barre de navigation, il semble que les navigateurs sont conçus pour apporter de l'ancrage à droite sur le bord de l'écran, ce qui semble mauvais. Donc navbars juste aggraver le problème. Par exemple, sur cette page que vous êtes en train de regarder, si vous cliquez sur le lien "partager", vous pouvez voir le problème, la upvote flèche est coupé le haut de la page, puis on dirait qu'il est poussé vers le bas avec JS. Pensez-vous StackOverflow devrait ajouter encore plus de rembourrage en haut de chaque réponse? Si vous me demandez le rembourrage est très beau et on ne devrait pas perturber la conception des proportions de fixer un navigateur bug de défilement.
    • Ainsi, les OP, évidemment, n'est pas d'accord avec vous que le rembourrage fix est un "acceptable" solution - surtout quand ils sont à la recherche pour un CSS solution.
    • Pourquoi cela devrait-il être un bug lié au navigateur? Il se comporte exactement comme prévu dans le cahier des charges en faisant défiler vers le point d'alignement du bord de la marge intérieure de l'élément. Ce n'est pas le navigateur préoccupation compte tenu des éléments qui sont pris hors de la circulation des documents.
    • Les ancres HTML ont été créés pour les personnes à rechercher du contenu sur une page, comme pour une "table des matières." Si le contenu désiré ne peut pas être situé dans une présentable, parce qu'il est caché sous une barre de navigation, je considère qu'une faille dans le navigateur. En termes de UX, le navigateur devrait faire ce que veut l'utilisateur, afficher le contenu. À partir d'un point de vue développeur, la hausse des z-index ne doit pas nécessairement influer sur le comportement de défilement de la baisse des z-index. Donc je ne serais pas ce que cela change dans le futur, mais par l'IA, un navigateur peut détecter qu'une barre de navigation est et ajuster le point d'ancrage de défilement de l'expérience en conséquence.

    InformationsquelleAutor Christoph
  2. 27

    Vous pouvez simplement utiliser CSS sans javascript.

    Donner votre point d'ancrage d'une classe: 

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

    Vous pouvez ensuite la position de l'ancre d'un décalage supérieur ou inférieur à celui où il apparaît sur la page, en en faisant un élément de bloc et relativement positionnement. -250px sera la position de l'ancre jusqu'250px 

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

    Par Jan voir la compensation d'une ancre html pour ajuster l'en-tête fixe

    • Aha, de sorte que le display: block était le problème. J'ai essayé de faire une chose semblable, mais le navigateur ne tiendrait pas compte de la relative offset, et j'ai fini avec a[name] {position: absolute; height: 150px; margin-top: -150px;}.
    • Cela fonctionne très bien. Ce problème m'a gêné pendant des années. Merci!
    • Ce doit être l'une des plus spectaculaires CSS trucs que j'ai jamais vu.
    • Je suis heureux que j'ai trouvé cette réponse, et il m'a aidé à résoudre mon problème. J'aimerais savoir POURQUOI il arrive parfois que le défilement descend trop bas. Peut-être que c'est juste le placement de l'ancre est trop faible dans le balisage?
    InformationsquelleAutor FredTheLover
  3. 7

    CSS uniquement: c'est un peu sale, mais :target {padding-top: 20px;} serait de travailler si vous créez un lien vers un élément de type block (je suppose que vous faites, puisque votre question, dit-div). Toutefois, il ne pourrait pas l'air si bon lorsque vous faites défiler manuellement par la suite. Exemple http://dabblet.com/gist/3121729

    Encore, je pense que l'aide d'un peu de JavaScript pour corriger ce serait plus agréable.

    • Merci!!!! Cela a fonctionné exactement ça pour moi.
    • Cela n'a pas fonctionné pour moi (je suis en utilisant bootstrap), mais une variante décrite ici n': itsupportguides.com/knowledge-base/tech-tips-tricks/...
    • Probablement, ce sera de détruire quelqu'un du design. Mais je ne vais pas downvote vous 😉
    InformationsquelleAutor Ana
  4. 3

    J'ai eu le même problème. Voici un jQuery solution

    $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash;
    var $trget = $(target);
    //Example: your header is 70px tall.
    var newTop = $trget.offset().top - 70; 
    $('html, body').animate ({
        scrollTop: newTop
    }, 500, 'swing', function () {
        window.location.hash = target;
    }); 
});
    • La raison pour html, body est la compatibilité du navigateur stackoverflow.com/a/19738288/722796
    • Des solutions similaires ici stackoverflow.com/questions/11365091/...
    • Depuis que vous êtes à l'application des règles très strictes et sévères critiques de plusieurs des réponses ici, j'ai les points suivants de grief ici: 1) javascript réponse pour un css seule question, 2) sur le dessus de 1), y compris une structure lourde pour quelque chose où il est complètement inutile d'3) code défectueux (substitution de la fenêtre de hachage avec une valeur non valide) 4) la production de contenu en double (la bonne chose à faire serait de fournir un lien vers les questions dans la section commentaire de la réponse) S'il vous plaît au moins nettoyer votre code!
    • Ne le prenez pas personnellement, ma solution fonctionne mieux. Désolé, vous avez un ego fragile, surtout sur une solution faible. 1. Si vous comprenez l'anglais, il n' pas "demande de CSS." 2. jQuery est déjà dans le cache de la plupart des navigateurs, il n'y a rien à télécharger pour la plupart des gens. 3. Le reste de votre commentaire est absurde. Si vous voyez une erreur, vous pouvez essayer le bouton "modifier", mais depuis cette jQuery solution fonctionne bien pour beaucoup de développeurs, bonne chance pour essayer de "réparer". Le code d'origine est dérivé à partir d'une populaire de la vidéo de YouTube. 4. Effet de Swing est génial et vous pouvez contrôler la vitesse.
    • Pour être membre de la communauté vous semblez avoir étonnamment peu de connaissances de la façon dont la plate-forme fonctionne: 1) les Balises sont là pour une raison, 2) downvoting n'est pas là pour exprimer votre opinion personnelle, mais pour marquer des réponses qui sont bâclée, mal ou de la plaine erroné 3) Il devrait être dans tous les intérêt des utilisateurs pour éviter le contenu dupliqué. Aussi, j'ai expliqué ce qui s'est incorrect dans votre code, il est donc simplement une éducation se déplacer dans l'esprit de la signification originale de downvoting de vous avoir corrigé les problèmes évidents dans votre code - mais oui, je n'aurais probablement modifier la réponse d'un utilisateur plus conviviale moi-même au lieu de DV.
    • Vous avez raison à propos de la fenêtre de hachage, j'ai juste corrigé. En tout cas, sur d'autres recherches, c'est une double question.
    • Hey, c'est une belle jQuery alternative! Même définit la valeur de hachage de la fenêtre emplacement correctement (voler ce pour la js partie de ma réponse)! 😉

    InformationsquelleAutor PJ Brunet
  5. 0

    Essayer avec window.scrollBy(xnum,ynum);

    xnum: le nombre de pixels à défiler, le long de l'axe des x (horizontal)
    ynum: le nombre de pixels à défiler, le long de l'axe des y (vertical)

    Par exemple: http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby

    • Si je n'avais pas la concurrence d'un autre post pour cette question, je donne -1 pour le référencement de w3schools. Si vous êtes intéressé pourquoi, découvrez w3fools.com
    • Merci pour vos précieuses informations. Ici je l'ai mentionné seul exemple qui montre comment cela va fonctionner, pas plus que cela.
    • Yah, je voulais juste faire remarquer, que w3schools doit être utilisé avec une extrême prudence. Si vous voulez une meilleure fondation, utiliser les SOCIÉTÉ à la place.
    • OK, Merci pour cette information.
    InformationsquelleAutor RAN