CSS: pure animation CSS défilement

Je cherchais un moyen de faire défiler lorsque je clique sur un bouton situé en haut d’une page en utilisant uniquement CSS3.

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 sur un clic sur un bouton situé en haut de la page, donc je me demandais: est-il possible de faire ces défilement CSS sans les boutons avec une balise d’ancrage?

HTML ressemble à ceci: Learn more

J’ai déjà des CSS que je dois déclencher en cliquant sur un 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; } } 

    Vous pouvez le faire avec les balises d’ancrage en utilisant le 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 en cours reçoit une correspondance. Exemple

    Sachant cela, nous pouvons combiner cette technique avec 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 .

    Eh bien, si cela ne vous dérange pas de prendre 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 défilant:

     scroll-behavior: smooth; 

    Voir la référence MDN .

    Utilisez-le comme ceci:

         Go to foo!  
    That's foo.
    Back to top

    Voici un violon

    Et voici aussi un violon à défilement horizontal et vertical.

    Vous pouvez utiliser mon script à partir de CodePen en encapsulant tout le contenu dans une DIV .levit-container.

     ~function () { function Smooth () { this.$container = document.querySelector('.levit-container'); this.$placeholder = document.createElement('div'); } Smooth.prototype.init = function () { var instance = this; setContainer.call(instance); setPlaceholder.call(instance); bindEvents.call(instance); } function bindEvents () { window.addEventListener('scroll', handleScroll.bind(this), false); } function setContainer () { var style = this.$container.style; style.position = 'fixed'; style.width = '100%'; style.top = '0'; style.left = '0'; style.transition = '0.5s ease-out'; } function setPlaceholder () { var instance = this, $container = instance.$container, $placeholder = instance.$placeholder; $placeholder.setAtsortingbute('class', 'levit-placeholder'); $placeholder.style.height = $container.offsetHeight + 'px'; document.body.insertBefore($placeholder, $container); } function handleScroll () { this.$container.style.transform = 'translateZ(0) translateY(' + (window.scrollY * (- 1)) + 'px)'; } var smooth = new Smooth(); smooth.init(); }(); 

    https://codepen.io/acauamontiel/pen/zxxebb?editors=0010

    Et pour les navigateurs compatibles Webkit, j’ai obtenu de bons résultats avec:

     .myElement { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; // Added in from answer from Felix overflow-x: scroll; } 

    Cela fait que le défilement se comporte beaucoup plus comme le comportement standard du navigateur – au moins, il fonctionne bien sur l’iPhone que nous testons!

    J’espère que cela pourra aider,

    Ed