Implémentation CSS Retour en haut et transition en douceur

La mise en œuvre d'un bouton arrière à haut avec un effet de transition lisse dans CSS nécessite les étapes suivantes: Ajoutez un élément avec id = "back-to-top"; Définissez le bouton sur le positionnement fixe, ajoutez des styles (y compris la transparence initiale de 0); Réglez la transparence sur 1 lorsque le bouton est plané et ajoutez un effet de transition en douceur; Ajoutez la détection de défilement du bouton à l'aide de JavaScript, affichez le bouton lors du défilement de plus de 100 pixels et faites défiler en douceur en haut lorsque vous cliquez sur le bouton.

Comment mettre en œuvre des transitions en haut et en douceur dans CSS

Le bouton Back to Top est une fonctionnalité utile qui permet aux utilisateurs de revenir rapidement en haut de la page Web. Pour implémenter un bouton de retour à haut avec un effet de transition en douceur à l'aide de CSS, suivez ces étapes:

Étape 1: HTML

 <code class="html"><a href="#" id="back-to-top">回到顶部</a></code>

Ajoutez un élément <a></a> avec id="back-to-top" à l'élément de la page Web.

Étape 2: CSS

 <code class="css">#back-to-top { position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f1f1f1; color: #333; text-decoration: none; font-size: 16px; cursor: pointer; opacity: 0; transition: opacity 0.5s ease-in-out; } #back-to-top:hover { opacity: 1; }</code>

• Réglez le bouton sur la position fixe afin qu'il apparaisse toujours dans le coin inférieur droit de l'écran.
• Définit les marges intérieures, les bordures et les coins arrondis du bouton.
• Réglez la transparence initiale du bouton sur 0 pour le masquer.
• Réglez la transparence sur 1 lorsque le bouton oscille, ce qui le rend visible.
• Utilisez la propriété transition pour ajouter un effet de transition en douceur à la transparence.

Étape 3: fonction

Le suivant utilise JavaScript pour ajouter la fonction de détection de défilement au bouton:

 <code class="javascript">const backToTop = document.getElementById('back-to-top'); // 窗口滚动时显示或隐藏按钮window.addEventListener('scroll', () => { if (window.scrollY > 100) { backToTop.style.opacity = 1; } else { backToTop.style.opacity = 0; } }); // 点击按钮时滚动到顶部backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });</code>

• Vérifiez que la fenêtre a fait défiler de plus de 100 pixels.
• Si c'est le cas, le bouton s'affiche. Sinon, cachez le bouton.
• Lorsque le bouton est cliqué, faites défiler en douceur en haut de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!