web-dev-qa-db-fra.com

CSS: pure animation de défilement CSS

Je cherchais un moyen de faire défiler l'écran vers le bas en cliquant sur un bouton situé en haut d'une page à l'aide de CSS3 uniquement.

J'ai donc trouvé ce tutoriel: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

Démo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

Mais c’est un peu trop avancé pour mes besoins puisque je veux juste que le navigateur défile d’un clic sur un bouton situé en haut de la page. Je me demandais donc: est-il possible de faire ces défilement CSS sans les boutons de saisie, avec une étiquette d'ancrage?

HTML ressemble à ceci: <a href="#" class="button">Learn more</a>

J'ai déjà des CSS que je dois déclencher en cliquant sur le bouton:

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}
css3scrollanchortransition
75
blameless75

Vous pouvez le faire avec des balises d'ancrage à l'aide du pseudo-sélecteur css3 :target, ce sélecteur va être déclenché lorsque l'élément avec le même identifiant que le hachage de l'URL actuelle obtient une correspondance. Exemple

Sachant cela, nous pouvons combiner cette technique à l’utilisation de sélecteurs de proximité tels que "+" et "~" pour sélectionner tout autre élément à travers l’élément cible qui correspond au hachage de l’URL actuelle. Un exemple de ceci serait quelque chose comme ce que vous demandez .

86
Jesus Bejarano

Eh bien, si cela ne vous dérange pas ne prend pas en charge tous les principaux navigateurs (uniquement Firefox 36+, Chrome 61+ et Opera 48+), utilisez des liens d'ancrage. et cette propriété unique pour le conteneur de défilement:

scroll-behavior: smooth;

Voir le référence MDN .

Utilisez-le comme ceci:

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

Voici un violon .

Et voici aussi un Fiddle avec défilement horizontal et vertical.

102
Felix Edelmann