web-dev-qa-db-fra.com

boutons html / css permettant de faire défiler les différentes sections div d’une page Web

Est-ce que quelqu'un peut m'aider je cherche css/html exemple de code:

J'ai une page Web avec 3 boutons (haut, milieu, bas), chacun spécifié à une section div sur ma page, disons que ma première section div est au milieu de cette page div id='middle'.

Si je clique sur ce bouton (au milieu), ma page défilera automatiquement du haut de ma page au div #middle section.

idem pour les autres boutons référencés à div id='top', et div id='bottom'

Merci en avant! Je ne pouvais vraiment pas trouver de solution sur Internet.

Existe-t-il un moyen de garder ma liste de boutons sur une position fixe afin qu'elle reste à l'écran lors du déplacement de sections?

csshtmlbuttonscroll
19
JayD

Pour quelque chose de vraiment basique, utilisez ceci:

<a href="#middle">Go To Middle</a>

Ou pour quelque chose de simple en javascript, consultez ce plugin jQuery ScrollTo . Très utile pour faire défiler en douceur.

27
rncrtr

essaye ça:

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
30
Waqleh

[~ # ~] html [~ # ~] 

<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div id="top"><a href="top"></a>Top</div>
<div id="middle"><a href="middle"></a>Middle</div>
<div id="bottom"><a href="bottom"></a>Bottom</div>

[~ # ~] css [~ # ~] 

#top,#middle,#bottom{
    height: 600px;
    width: 300px;
    background: green; 
}

Exemple http://jsfiddle.net/x4wDk/

11
Kevin Bowersox

Il existe un moyen beaucoup plus facile d'obtenir l'effet de défilement sans javascript. Dans votre CSS, ciblez simplement la balise html et donnez-lui un comportement de défilement: lisse;

html {
  scroll-behavior: smooth;
 }
 
 a {
  text-decoration: none;
  color: black;
 } 
 
 #down {
  margin-top: 100%;
  padding-bottom: 25%;
 } 
<html>
  <a href="#down">Click Here to Smoothly Scroll Down</a>
  <div id="down">
    <h1>You are down!</h1>
  </div>
</html

Le "comportement de défilement" indique à la page comment il doit défiler et est tellement plus simple que d'utiliser du javascript. Javascript vous donnera plus d’options sur la vitesse et la fluidité, mais cela vous permettra d’éviter tout code déroutant.

7
ihayes83