Fixe-tête de page les chevauchements dans les pages des ancres

Si j'ai un non-défilement d'en-tête dans une page HTML, fixés sur la partie supérieure, ayant une hauteur définie:

Est-il possible d'utiliser l'URL d'ancrage (la #fragment partie) navigateur pour faire défiler jusqu'à un certain point dans la page, mais toujours respecter la hauteur de l'élément fixe sans l'aide de JavaScript?

http://foo.com/#bar

MAL (mais le comportement commun): CORRECT: 
+---------------------------------+ +---------------------------------+ 
| BAR/////////////////////l'en-tête| | ////////////////////////en-tête | 
+---------------------------------+ +---------------------------------+ 
| Voici le reste du Texte | | BAR | 
| ... | | | 
| ... | | Ici, c'est le reste du Texte | 
| ... | | ... | 
+---------------------------------+ +---------------------------------+

Connexes: stackoverflow.com/questions/10732690/...
css-tricks.com/hash-tag-links-padding
OUI, c'est la meilleure réponse. Vérifiez également nicolasgallagher.com/jump-links-and-viewport-positioning/demo à l'intérieur. Ce qui a le mieux fonctionné pour moi: .dislocate50px, #bar { padding: 50px 0 0; margin: -50px 0 0; -webkit-background-clip: content-box; background-clip: content-box; }
je suis à la recherche d'une solution qui fonctionne pour les ancres à venir à partir de la même page ou sur une autre page, * et qui s'adapte de la page vers le bas sur une touche afin que le contenu ne pas être coupés en-tête, * et qui permet sib-div pied de page pour faire défiler jusqu'à un contenu de la div. N'ai pas trouvé de solution pour le moment! Mais je dois dire, je pense que la bonne façon serait de cibler l'ensemble de la div du contenu, et non pas de chaque individu d'ancrage. stackoverflow.com/questions/51070758/...

InformationsquelleAutor Tomalak | 2010-11-03

129

J'ai eu le même problème.
Je l'ai résolu en ajoutant une classe à l'élément d'ancrage avec la topbar hauteur que le padding-top valeur.
```
<h1><a class="anchor" name="barlink">Bar</a></h1>
```
Et puis tout simplement la css:
```
.anchor { padding-top: 90px; }
```
- +1 simple et Élégant.
- Sachez que cette solution rend les liens à l'intérieur de la marge de la zone non cliquable. Pour corriger cela, vous devez utiliser le z-index, et de définir les liens de valeur supérieure à l'ancre. Rappelez-vous que vous topbar devrait avoir la plus grande valeur d'index-z, de sorte que le contenu de la page ne flottent pas ontop de la topbar lorsque vous faites défiler.
- Ne fonctionne pas sur Chrome v28 en raison d'un WebKit position fixe bug causant d'en-tête à disparaître. Cette réponse a fait le tour de la gi mon cas.
- MuttenXd.. vous êtes mon héros. J'avais bizarre non-lien de fonction problème sur mon site (sans rapport avec les ancres) été me rend fou. Votre non-cliquable commentaire vraiment aidé. Je dois ya de grands!
- N'est pas d'ajouter rembourrage en haut de l'ancre va le pousser plus loin vers le bas? Ne voulez-vous pas plus loin jusqu'à la place afin de tenir compte de l'en-tête fixe?
- utilisation <span> au lieu de <a> pour éviter la couleur de l'actualité.
- Comme le suggère Roy Shoa réponse, ajouter margin-top: -90px; pour contrer le vide créé par le rembourrage.
- J'ai utilisé .anchor:target {padding-top: 90px;} de sorte qu'il ne fait qu'ajouter du rembourrage quand ils ont utilisé la balise d'ancrage. De cette façon, il n'y a pas toujours un tas de rembourrage si le chargement de la page en haut. Seulement quand il charge un certain moment les plus bas sur la page.
- <pre><code> // handle de hachages lors du chargement de la page // <stackoverflow.com/a/29853395> function adjustAnchor() { const $ancre = $(':la cible'); const fixedElementHeight = $('.navbar-fixed-top").outerHeight(); if ($ancre.length > 0) de la fenêtre.scrollTo(0, $ancre.offset().haut - fixedElementHeight); } $(window).sur('hashchange charge", adjustAnchor); $('body').on('click', "a[href^='#']", function (ev) { if (window.emplacement.hash === $(this).attr('href')) { ev.preventDefault(); adjustAnchor(); } });</pre></code>
- J'ai utilisé un peu de javascript pour ajouter et supprimer rembourrage en tant que de besoin. $(function(){ $('#jump').click(function() { $('#id').addClass("anchor"); }); $('.top').click(function() { $('#id').removeClass("anchor"); }); });
InformationsquelleAutor MutttenXd
207

Si vous ne pouvez pas ou ne souhaitez pas définir une nouvelle classe, ajoutez une hauteur fixe ::avant pseudo-élément de la :target pseudo-classe CSS:
```
:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}
```
Ou faites défiler la page par rapport à :target avec jQuery:
```
var offset = $(':target').offset();
var scrollto = offset.top - 60; //minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
```
- J'aime vraiment votre solution. C'est la solution la plus propre que j'ai trouvé.
- C'est la solution qui a fonctionné parfaitement pour moi sans farce quoi que ce soit d'autre dans ma mise en page.
- Si vous utilisez anchor.js la bibliothèque, le css solution fonctionne parfaitement.
- CSS solution a un problème lorsqu'il est utilisé avec liste dans WebKit. Regardez: stackoverflow.com/questions/39547773/...
- Cela ne semble pas fonctionner dans Microsoft Bord.
- Il ne fonctionnera pas si la cible a haut de remplissage ou de frontière puisqu'il repose sur la marge de l'effondrement.
- Brillant, a Fonctionné comme un charme! merci @Adripants , résolu très vieux bug dans l'utilisation de pseudo css sans changer seul élément du dom.
- :target était tout simplement Génial!
- Le jQuery solutions ne fonctionne qu'à l'intérieur de $(document).ready()
- Uniquement à titre d'information: Si le ciblées d'ancrage de l'élément a du style display: table; alors il ne fonctionnera pas.
- Ne fonctionne pas en Bord de 42.
- J'ai aimé :la cible
InformationsquelleAutor Adrian Garner
115

- Je utiliser cette approche:
```
/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}
```
Il ajoute un élément invisible avant chaque cible. Il fonctionne IE8+.

Voici plusieurs solutions:
http://nicolasgallagher.com/jump-links-and-viewport-positioning/
- N'a pas pu obtenir que cela fonctionne dans Firefox 15
- il fonctionne très bien sur chrome mais pas de travail pour firefox ???
- regardez le lien Badabam fournie, il y a une deuxième solution, que j'utilise et qui fonctionne dans Chrome et Firefox
- Testé sur le dernier Firefox (55.0.3 sur PC) et cela fonctionne maintenant. 🙂
- Cela ne fonctionne pas dans Firefox 57 sur PC
InformationsquelleAutor Jeremias Erbs
36

Officiel De Bootstrap Adopté Réponse:
```
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; //Set the Appropriate Height
  height: 75px; //Set the Appropriate Height
  visibility: hidden; 
}
```
Crédits

Fusion
- Merci beaucoup de cette, +1 pour l'exhaustivité.
- Cette solution a un problème lorsqu'il est utilisé avec liste dans WebKit. Regardez: stackoverflow.com/questions/39547773/...
- ne fonctionne pas dans firefox 45
- * est implicite, [id]:before fonctionne aussi bien
InformationsquelleAutor blnc
25

La meilleure façon que j'ai trouvé de traiter ce problème est (remplacer 65px avec votre élément fixe hauteur):
```
div:target {
  padding-top: 65px; 
  margin-top: -65px;
}
```
Si vous n'aimez pas utiliser le cible sélecteur vous pouvez aussi le faire de cette façon:
```
.my-target {
    padding-top: 65px;
    margin-top: -65px;
}
```
Remarque: cet exemple ne fonctionnera pas si l'élément cible ont un backgound couleur que differant de son parent.
par exemple:
```
<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>
```
dans ce cas, le vert la couleur de mes-élément cible va écraser son parent rouge élément 65px.
Je n'ai pas trouvé pur CSS solution pour faire face à ce problème, mais si vous n'avez pas d'autre couleur d'arrière-plan de cette solution est la meilleure.
- De toutes les réponses, c'est la seule qui a fonctionné pour moi!
InformationsquelleAutor Roy Shoa
14

Alors que certaines propositions de solutions de travail pour fragment de liens (= hash liens) dans la même page (comme un lien de menu qui défile vers le bas), j'ai trouvé qu'aucun d'entre eux travaillaient dans le courant de Chrome lorsque vous voulez utiliser le fragment de liens à venir dans à partir d'autres pages.

Afin de l'appelant http://www.mydomain.com/page.html#foo à partir de zéro sera PAS compenser votre cible actuelle de Chrome avec tout le CSS solutions ou JS solutions.

Il y a aussi un jQuery rapport de bug décrivant certains détails du problème.

SOLUTION

La seule option que j'ai trouvé jusqu'à présent qui fonctionne vraiment en Chrome est le JavaScript qui n'est pas appelé onDomReady mais avec un retard.
```
//set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

//add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; //minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}
```
RÉSUMÉ

Sans JS retard solutions fonctionnera probablement dans Firefox, IE, Safari, mais pas dans google Chrome.
- Je suis venu à la même conclusion et la solution. Il semble que chaque personne d'autre est d'oublier les liens externes qui utilisent les hashtags.
- J'ai ce problème aujourd'hui et j'ai utilisé votre solution. Bien qu'il semble que vous n'avez pas besoin de délai d'attente. Cela fonctionne comme IIFE ainsi.
- Oui, c'est peut-être possible, mais seulement si votre JS est placé à la fin du code HTML. Sinon, votre de défilement de la cible ne soit pas encore dans les DOM. En fait c'est tout l'intérêt de l'utilisation de onDomReady. Donc je suppose que le délai d'attente est la version stable de chemin à faire.
- Cette réponse a été le seul qui a travaillé pour les liens externes. Toutefois, il ne fonctionne pas pour moi, quand le lien est appelée dans la même page 🙁 des idées?
- avez-vous trouvé une solution? Je vais avoir le même problème.
- Malheureusement, non 🙁
- Enfin - j'ai été en utilisant des points d'ancrage extérieurs et aucune des autres solutions étaient de travail et je ne pouvais pas comprendre pourquoi quand tout le monde disait qu'ils étaient de travail. J'ai remarqué avec ce que mon expérience avec IE est qu'il faut le double de la quantité de retard pour le travail. Peut-être plus solide méthode serait de mettre un peu de retard et ensuite exécuter une boucle qui vérifie si l'élément existe et quand il fait exécuter le code, peut-être avec de légers retards entre chaque case.
InformationsquelleAutor Jpsy
8

Pour google Chrome/Safari/Firefox, vous pouvez ajouter un display: block et l'utilisation d'une marge négative pour compenser le décalage, comme:
```
a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}
```
Voir l'exemple http://codepen.io/swed/pen/RrZBJo

InformationsquelleAutor MrSwed

Vous pouvez le faire avec jQuery:

var offset = $('.target').offset();
var scrollto = offset.top - 50; //fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

Pas ".cible", doit être ":la cible"
c'est la classe "cible".

InformationsquelleAutor webvitaly

5

Vous pouvez essayer ceci:
```
<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>
```
Le jeu en haut de rembourrage de la valeur à la hauteur de votre en-tête. Cela va introduire un léger supplément d'avance au sommet de votre tête, mais il ne sera visible que lorsque l'utilisateur passe à l'ancre, puis défiler vers le haut. J'ai composé cette solution pour mon site dès maintenant, mais il n'affiche une petite barre fixe en haut de la page, rien de trop haut.
- Mh. Pas mal, mais encore tout à fait un hack (et ne fonctionne pas dans IE, malheureusement).
InformationsquelleAutor ygoe

Ça fonctionne pour moi:

HTML LIEN vers l'Ancre:

<a href="#security">SECURITY</a>

Ancre HTML:

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

CSS :

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

InformationsquelleAutor avila

4

J'ai eu de travailler plus facilement avec le CSS et le HTML, à l'aide de la "ancre:avant de" méthode mentionnée ci-dessus. Je pense qu'il fonctionne le mieux, car il n'est pas de créer des rembourrage entre votre divs.
```
.anchor:before {
  content:"";
  display:block;
  height:60px; /* fixed header height*/
  margin:-60px 0 0; /* negative fixed header height */
}
```
Il ne semble pas fonctionner pour la première div sur la page, mais vous pouvez contrer que par l'ajout d'un rembourrage pour cette première div.
```
#anchor-one{padding-top: 60px;}
```
Voici un travail de violon: http://jsfiddle.net/FRpHE/24/

InformationsquelleAutor Eric Wood

Il se sent un peu hacky à mon puriste de l'esprit, mais comme une css, la seule solution, vous pouvez ajouter un rembourrage à l'actif ancré élément à l'aide de la :target sélecteur:

CSS:

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

HTML:

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

Ce n'est pas hacky à tous! Solution sympa.

InformationsquelleAutor Moob

J'ai trouvé, j'ai dû utiliser les deux MutttenXd's et Badabams'CSS ensemble des solutions, que le premier n'a pas de travail dans le Chrome et le deuxième ne fonctionne pas dans Firefox:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

InformationsquelleAutor tshalif

Je suis en utilisant @Jpsy réponse, mais pour des raisons de performances, je ne suis réglage de la minuterie si le hachage est présent dans l'URL.

$(function() {
      //Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

function delayedFragmentTargetOffset(){
      var offset = $(':target').offset();
      if(offset){
          var scrollto = offset.top - 80; //minus fixed header height
          $('html, body').animate({scrollTop:scrollto}, 0);
          $(':target').highlight();
      }
  };

L'OP a demandé de ne pas utiliser de javascript.
Fonctionne avec des liens externes, mais pas dans la page des liens.

InformationsquelleAutor sandre89

La manière que je trouve être le plus propre est la suivante :

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

InformationsquelleAutor Guillaume Le Mière

3

J'ai eu beaucoup de mal avec beaucoup de réponses ici et d'ailleurs mon signet d'ancrage ont été en-têtes de section dans une page de FAQ, de sorte que la compensation de l'en-tête n'aide pas, comme le reste du contenu, serait simplement de rester où il était. Donc je pensais que je poste.

Ce que j'ai fait était un composite de quelques solutions:
1. Le CSS:
```
.bookmark {
    margin-top:-120px;
    padding-bottom:120px; 
    display:block;
}
```
Où "120px" est votre en-tête fixe la hauteur (peut-être plus une certaine marge).
1. Le lien de signet HTML:
```
<a href="#01">What is your FAQ question again?</a>
```
2. Référencé le contenu HTML:
```
<span class="bookmark" id="01"></span>
<h3>What is your FAQ question again?</h3>
<p>Some FAQ text, followed by ...</p>
<p>... some more FAQ text, etc ...</p>
```
La bonne chose à propos de cette solution est que le span élément n'est pas seulement caché, il s'est effondrée et n'encombrez pas votre contenu.

Je ne peux pas prendre beaucoup de crédit pour cette solution, car il s'agit d'un swag de différentes ressources, mais il a le mieux fonctionné pour moi dans ma situation.

Vous pouvez voir le résultat réel ici.
- Merci beaucoup pour le partage! Vieux que le thread est, il ne semble pas encore être une solution canonique à ce problème.
- +SteveCinq Vous avez lu mon esprit, j'ai été confronté aux mêmes problèmes où le partage des solutions ne fonctionnent pas comme prévu. L'ajout dans le <span> avec l'ancrage dans la durée, avec l'ajout dans la marge et la marge a fonctionné pour moi. Merci beaucoup pour avoir pris le temps de soumettre cette réponse en dépit de l'âge du fil!
InformationsquelleAutor SteveCinq
3
```
html {
  scroll-padding-top: 70px; /* height of sticky header */
}
```
à partir de: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

InformationsquelleAutor François Romain
2

Un peu intrusif approche à l'aide de jQuery:

Lien:
```
<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>
```
Contenu:
```
<h3 id="my-anchor-1">Here is Anchor 1</a>
```
Script:
```
$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});
```
Par l'affectation de l'ancre-lien de la classe pour les liens, le comportement des autres liens (comme l'accordéon ou à l'onglet de contrôles) ne sont pas affectés.

La question ne veut pas du javascript mais l'autre plus populaire de la question est fermée à cause de cela, et je ne pouvais pas répondre là.

InformationsquelleAutor Hüseyin Yağlı

J'ai besoin de quelque chose qui fonctionne pour les liens entrants, liens sur la page, ET qui peuvent être ciblés par JS pour que la page peut répondre aux changements dans l'en-tête hauteur

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2>

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

La z-index: -1 permet des liens dans le "rembourrage zone" au-dessus d'un fragment-cible pour toujours être cliquable, comme indiqué par @MuttenXd sur sa réponse

Je n'ai pas trouvé encore un problème dans IE 11, Edge 15+, Chrome 38+, FF 52+ ou Safari 9.1+

InformationsquelleAutor Arth

2

Je n'avait pas de chance avec la réponse ci-dessus énumérés et fini à l'aide de cette solution qui a fonctionné parfaitement...

Créer un vide durée de l'endroit où vous souhaitez placer votre point d'ancrage.
```
<span class="anchor" id="section1"></span>
<div class="section"></div>
```
Et d'appliquer la classe suivante:
```
.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}
```
Cette solution fonctionne même si les sections ont différents fonds de couleur! J'ai trouvé la solution à de ce lien.
- N'est-ce pas exactement la même méthode que Guillaume Le Mière et quelques autres l'ont indiqué dans ce fil?
- Il est très similaire, mais je pense que c'est plus facile à comprendre et une réponse plus détaillée avec une encore plus en profondeur lien vers une source extérieure.
InformationsquelleAutor Matt Underwood
1
```
<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>
```
Ce code devrait faire l'affaire. Échanger 45px pour la hauteur de votre barre d'en-tête.

EDIT: Si vous utilisez jQuery est une option, j'ai également eu beaucoup de succès à l'aide de jQuery.localScroll avec un décalage de valeur de consigne. L'option offset est une partie de jQuery.scrollTo, qui jQuery.localScroll est construite. Une démo est disponible ici: http://demos.flesler.com/jquery/scrollTo/ (deuxième fenêtre, en vertu de 'décalage')
- cette solution fonctionne en effet, mais il n'est pas à l'épreuve des balles, et il exige beaucoup de réglages pour les différents navigateurs 🙁 bon essayer thoug. Je suis à la recherche d'une solution sans supplément de balisage.
- La honte c'est tellement bordélique, signifie que vous ne pouvez pas utiliser les Id. Aimerais trouver une solution, j'ai essayé toutes sortes de choses.
- Vous m'avez sauvé beaucoup de travail, merci!
InformationsquelleAutor fourk
1

Ici est un jquery solution qui fonctionne dans IE:

Supposons que la barre de navigation éléments sont quelque chose comme ceci:
```
<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>
```
Vous pouvez utiliser les éléments suivants jquery extrait de compenser le défilement:
```
$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}
```
- J'ai été en mesure d'utiliser une version légèrement modifiée de ce code de Tonnerre. J'ai essayé beaucoup de CSS seule et la plus simple des solutions sur cette page et sur stackoverflow.com/questions/10732690/... et sur stackoverflow.com/questions/10732690/... mais ils n'étaient pas utilisables en raison de mes exigences. La page est une page de FAQ avec beaucoup d'ancres de position, à la fois sur et hors de la page, aurait pu avoir beaucoup de taches blanches. Suite au prochain commentaire ....
- Pour le faire fonctionner pour moi, voici les changements: (1) modifier "<=" dans le href.l'indice de la ligne de "<" pour permettre la page de navigation; (2) modifier "un.de navigation" qui devait être "#faq un" pour mon utilisation; (3) variation de la var fromTop = 250 à un ternaire fondé sur la fenêtre.innerWidth pour les différences dans le mobile vs de bureau; (4) changer de 400 dans les animer à 1, l'animation n'est pas désirée et 0 ne fonctionne pas; (5) ajouter if ($('ma-page-sélecteur').longueur avant l'appel à offSetScrollFromLocation dans la fonction anonyme pour éviter les appels inutiles sur des pages ne sont pas nécessaires.
InformationsquelleAutor Thunder
1

Mis en œuvre à l'aide de :before fonctionnait très bien jusqu'à ce que nous avons réalisé que le pseudo-élément était en fait de couverture et de blocage des événements de pointeur sat dans le pseudo de l'élément de zone. En utilisant quelque chose comme pointer-events: none sur le :before ou même directement sur l'ancre avait aucun effet.

Ce que nous avons fait était de faire le point d'ancrage du positionnement absolu, puis en ajustant la position de l'compensé/hauteur de la zone fixe.

Décalage d'Ancrage sans bloquer les Événements de Pointeur
```
.section-marker {

    position: absolute;
    top: -300px;
}
```
La valeur, c'est que nous ne sommes pas le blocage de tous les éléments qui pourraient tomber à l'intérieur de ces 300px. L'inconvénient est que l'accaparement de cet élément de la position à partir de Javascript doit tenir compte du décalage, de sorte que toute logique, il a dû être adapté.

InformationsquelleAutor skabob11
1

C'est comment je l'ai eu pour enfin aller au bon endroit lorsque vous cliquez sur la barre de navigation. J'ai ajouté un gestionnaire d'événement pour la navigation clics. Ensuite, vous pouvez simplement utiliser "scrollBy" pour monter sur le décalage.
```
var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });
```
- Résout le problème, mais pas le "sans l'aide de Javascript" la partie...
InformationsquelleAutor Mile Mijatovic
1

J'ai créé un div avec quelques sauts de ligne et qui a donné l'id, j'ai ensuite mis le code que j'ai voulu montrer en dessous. Le lien serait alors jetez vous à l'espace au-dessus de l'image et de l'en-tête ne serait pas dans la voie:
```
<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">
```
Bien sûr, vous pouvez modifier le nombre de sauts de ligne pour répondre à vos besoins.
Cela a fonctionné parfaitement pour moi, vous ne savez pas si il y a des problèmes, je suis encore à apprendre le HTML.
- Pragmatique, mais il y a un inconvénient: elle ne fonctionne que pour le premier titre sur une page. Si il y a plus de rubriques, vous allez commencer à voir de grandes lacunes dans le texte en raison de la <br> balises avant chaque rubrique.
InformationsquelleAutor Anonymous

Utilisé ce script

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});

S'il vous plaît essayez d'expliquer pourquoi vous pensez que ce script puisse résoudre le problème

InformationsquelleAutor Aadil Memon

Comme CSS ancrage de Défilement spec entre en jeu, il est facilement possible avec scroll-margin-top de la propriété. Actuellement fonctionne sur Chrome et Opera (avril 2019). Aussi Safari 11+ doit soutenir, mais j'ai été incapable de l'exécuter sur Safari 11. Probablement que nous avons à attendre pour les gars de fix il y emmènerons pas.

Codepen exemple

CSS:

body {
  padding: 0;
  margin: 0;
}

h1,
p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
  position: sticky;
  top: 0;
  background-color: red;
  text-align: center;
  padding: 1rem;
}
.header .scroll {
  display: block;
  color: white;
  margin-bottom: 0.5rem;
}
.header .browsers {
  color: black;
  font-size: 0.8em;
}

HTML:

<header class="header">
  <a class="scroll" href="#heading">Scroll to heading</a>
  <span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris. 
</p>

C'est assez sucré. Espérons que ça va adoptées plus largement!

InformationsquelleAutor dakur

//handle hashes when page loads
//<http://stackoverflow.com/a/29853395>
function adjustAnchor() {
  const $anchor = $(':target');
  const fixedElementHeight = $('.navbar-fixed-top').outerHeight();
  if ($anchor.length > 0)
    window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
}
$(window).on('hashchange load', adjustAnchor);
$('body').on('click', "a[href^='#']", function (ev) {
  if (window.location.hash === $(this).attr('href')) {
    ev.preventDefault();
    adjustAnchor();
  }
});

Que ce n'est pas le "sans Javascript" restriction, malheureusement.

InformationsquelleAutor niftylettuce

0

- Je utiliser cette méthode parce que, pour une raison quelconque, aucune des autres solutions proposées effectivement travaillé pour moi. Je vous promets que j'ai essayé.
```
section {
   position: relative;
   border-top: 52px solid transparent; /* navbar height +2 */
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

section:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid transparent;
}
```
Remplacer section par une classe, si vous préférez.

source: Liens de sauts et de positionnement de la fenêtre d'affichage
- Testé sur Firefox 45 et Chrome 52.
- de démarrage de la version: 3.3.7
Pour ceux qui ne me crois pas j'ai gentiment préparé un jsfiddle avec la solution: SOLUTION

InformationsquelleAutor scavenger

CSS astuce sera une solution de contournement. Une bonne solution qui fonctionne dans tous les scénario peut être mis en œuvre à l'aide de jQuery.

Reportez-vous à https://codepen.io/pikeshmn/pen/mMxEdZ

Approche: Nous obtenir la hauteur de fixe de la valeur liquidative à l'aide de document.getElementById('header').offsetHeight
Et de compenser le faites défiler jusqu'à cette valeur.

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

P. S:

Il comprend un beau 5 pixels de différence entre l'en-tête et de la cible
De défilement effet n'est pas dur, plutôt lisse, Lisse Défilement

L'OP a demandé de ne pas utiliser de javascript.

InformationsquelleAutor Pikesh Prasoon

0

Très simple CSS seule réponse est de mettre le présent en haut de votre feuille de style:
```
a{padding-top: 90px;}
a:link{padding-top: unset;}
```
Le premier style réglemente toutes les balises d'ancrage où la seconde styles d'ancrage des balises avec un lien hypertexte.

Remarque: actuellement, Cela fonctionne dans Firefox et Edge, mais ni dans Chrome.

InformationsquelleAutor D. Stewart
0

Ajouter une classe avec un "paddingtop" de sorte qu'il fonctionne 😉
```
<h1><a class="paddingtop">Bar</a></h1>
```
Et pour le css vous avez:
```
.paddingtop { 
   padding-top: 90px; 
}
```
InformationsquelleAutor MAESTRO_DE

Vous devez vous connecter pour publier un commentaire.