CSS -Implementierung zurück nach oben und reibungsloser Übergang

Das Implementieren einer Back-to-Taste-Taste mit einem reibungslosen Übergangseffekt in CSS erfordert die folgenden Schritte: Fügen Sie ein Element mit ID = "Back-to-Top" hinzu; Stellen Sie die Taste auf die feste Positionierung ein und fügen Sie Stile hinzu (einschließlich anfänglicher Transparenz von 0). Stellen Sie die Transparenz auf 1 ein, wenn die Taste schwebt, und fügen Sie einen reibungslosen Übergangseffekt hinzu. Fügen Sie die Bildlauferkennung für die Schaltfläche mit JavaScript hinzu, zeigen Sie die Schaltfläche an, wenn Sie mehr als 100 Pixel scrollen, und scrollen Sie beim Klicken auf die Schaltfläche reibungslos nach oben.

So implementieren Sie in CSS zurück zu Top- und Smooth -Übergängen

Die Back -to -Top -Taste ist eine nützliche Funktion, mit der Benutzer schnell an die Spitze der Webseite zurückkehren können. Um eine Back -to -Taste -Taste mit einem reibungslosen Übergangseffekt mit CSS zu implementieren, befolgen Sie diese Schritte:

Schritt 1: HTML

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

Fügen Sie ein <a></a> Elements mit id="back-to-top" zum -Element der Webseite hinzu.

Schritt 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>

• Stellen Sie die Taste auf feste Position ein, damit sie immer in der unteren rechten Ecke des Bildschirms angezeigt wird.
• Legt die inneren Ränder, Grenzen und abgerundeten Ecken des Knopfes fest.
• Stellen Sie die anfängliche Transparenz der Taste auf 0 ein, um sie auszublenden.
• Stellen Sie die Transparenz auf 1 ein, wenn die Taste schwebt und sie sichtbar macht.
• Verwenden Sie die transition , um der Transparenz einen reibungslosen Übergangseffekt hinzuzufügen.

Schritt 3: Funktion

Im Folgenden wird JavaScript zur Funktionsweise der Scroll -Erkennungsfunktion zur Schaltfläche hinzugefügt:

 <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>

• Überprüfen Sie, ob das Fenster um mehr als 100 Pixel gescrollt wurde.
• Wenn ja, wird die Schaltfläche angezeigt. Ansonsten verstecken Sie die Taste.
• Wenn die Schaltfläche klickt, scrollen Sie reibungslos nach oben auf der Seite.

Das obige ist der detaillierte Inhalt vonCSS -Implementierung zurück nach oben und reibungsloser Übergang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!