web-dev-qa-db-fra.com

Ancres div défilant trop loin

J'utilise une barre statique en haut de mon site, d'environ 20 pixels de haut. Lorsque je clique sur un lien d'ancrage (pour ceux qui ne le savent pas, la navigation sur wikipedia fonctionne de cette manière. Cliquez sur un titre et le navigateur y descend) une partie du texte disparaît derrière la barre du haut.

Y at-il moyen d'empêcher que cela ne se produise? Je ne suis pas dans une position où je peux utiliser un iFrame. La seule chose à laquelle je peux penser, c'est de le faire défiler un peu à chaque fois, mais existe-t-il un autre moyen? Un paramètre CSS pour manipuler le corps ou quelque chose?

cssanchor
23
Koen027

Pour résoudre ce problème avec CSS, vous pouvez ajouter un remplissage aux éléments auxquels vous souhaitez accéder:

Exemple

Alternativement, vous pouvez ajouter une bordure:

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; 
}
<!-- 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 applicable.

Pour une solution javascript, vous pouvez utiliser un événement de clic associé aux éléments d'ancrage qui fait défiler une quantité de pixels ajustée comme suit:

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();
});
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);
}
<nav>static header</nav>
<a href="#section2">jump to section 2</a> 
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>

5
Christoph

Vous pouvez simplement utiliser CSS sans JavaScript.

Donnez à votre ancre un cours: 

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

Vous pouvez ensuite positionner l'ancre avec un décalage supérieur ou inférieur à l'endroit où elle apparaît réellement sur la page, en en faisant un élément de bloc et en le positionnant de manière relative. -250px placera l'ancre jusqu'à 250px 

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

Par Jan, voir décale une ancre html pour l’adapter à l’en-tête fixe

26
FredTheLover

CSS-only: c'est un peu sale, mais :target {padding-top: 20px;} fonctionnerait si vous créez un lien vers un élément de bloc} _ (je suppose que oui, puisque votre question dit div). Cependant, il se peut que votre apparence ne soit pas aussi satisfaisante lorsque vous faites défiler manuellement par la suite. Exemple http://dabblet.com/Gist/3121729

Néanmoins, je pense qu’utiliser un peu de JavaScript pour résoudre ce problème serait plus agréable.

7
Ana

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

$('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;
    }); 
});
2
PJ Brunet

Essayez avec window.scrollBy(xnum,ynum); 

xnum: combien de pixels doivent défiler sur l'axe des x (horizontal) ynum: combien de pixels sur défiler, sur l'axe des y (vertical)

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

0
RAN