CSS - Faire défiler le contenu sous un élément à position fixe ?

Question

HTML :

<div id="container">
    <ul>
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>
    <div id="somecontainer">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
    </div>
</div>

DEMO : http://jsfiddle.net/JRnDz/

PROBLÈME : Lorsque vous cliquez sur le lien nommé "second", la page doit sauter à la division avec l'id "second". Cependant, elle n'affiche pas la div entière, mais seulement une partie de celle-ci (150px-50px=100px). Le haut de la division est coupé.

QUESTION : Comment puis-je afficher la div entière après avoir cliqué sur le lien "second" ?

CE QUE J'AI ESSAYÉ : Ajout du positionnement relatif et du haut : 50px au conteneur :

#container {
  position: relative;
  top: 50px;
}

Answer 1

La solution écrite par @ipsnow72 est la plus claire.

Si vous préférez, vous pouvez utiliser le plugin ScrollTo de jquery et utiliser le paramètre offset. http://demos.flesler.com/jquery/scrollTo/

$(...).scrollTo( '#yourelement', {offset:-50} );

Answer 2

Cela dépend de l'utilisation de ce code, mais si vous ajoutez

#someconteiner div{
    padding-top:50px;
    margin-bottom:-50px;
    position:relative;
    display:block;
}

et jouer un peu avec les z-index, ça marche : http://jsfiddle.net/JRnDz/2/

Answer 3

Vous pouvez essayer ceci :

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondJump">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondJump"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

Placez l'emplacement auquel vous voulez accéder comme une ancre juste au-dessus de la division à laquelle vous voulez accéder.

Il est évident que vous feriez la même chose pour le 1er et le 3e.

EDIT : Essayez simplement de supprimer la position fixe de votre ul

Answer 4

Que dites-vous de ça ?

<div id="container">
<ul>
    <li><a href="#first">first</a></li>
    <li><a href="#secondAnchor">second</a></li>
    <li><a href="#third">third</a></li>
</ul>
<div id="someconteiner">
    <div id="first">
    </div>
    <a name="secondAnchor" style="padding-top: 50px; margin-top: -50px;"></a>
    <div id="second">
    </div>
    <div id="third">
    </div>
</div>
</div>

Voir : La barre de navigation à position fixe masque les ancres