CSSの実装は、トップに戻り、スムーズな移行に戻ります

CSSにスムーズな遷移効果でバックツートップボタンを実装するには、次の手順が必要です。ボタンを固定ポジショニングに設定し、スタイルを追加します（初期透明度0を含む）。ボタンがホバリングされたら、透明度を1に設定し、スムーズな遷移効果を追加します。 JavaScriptを使用してボタンのスクロール検出を追加し、100ピクセル以上スクロールするときにボタンを表示し、ボタンをクリックするときに上部までスクロールします。

CSSのトップおよびスムーズな移行を実装する方法

バックツートップボタンは、ユーザーがWebページの上部にすばやく戻ることができる便利な機能です。 CSSを使用してスムーズな遷移効果を備えたバックツートップボタンを実装するには、次の手順に従ってください。

ステップ1：HTML

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

Webページの要素にid="back-to-top"を持つ<a></a>要素を追加します。

ステップ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>

• ボタンを固定位置に設定して、画面の右下隅に常に表示されるようにします。
• ボタンの内側の縁、境界、丸い角を設定します。
• ボタンの初期透明度を0に設定して非表示にします。
• ボタンがホバリングしているときに透明性を1に設定し、表示します。
• transitionプロパティを使用して、透明性にスムーズな遷移効果を追加します。

ステップ3：関数

以下では、JavaScriptを使用してボタンにスクロール検出機能を追加します。

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

• ウィンドウが100ピクセル以上下にスクロールされていることを確認してください。
• その場合、ボタンが表示されます。それ以外の場合は、ボタンを非表示にします。
• ボタンがクリックされたら、ページの上部まで滑らかにスクロールします。

以上がCSSの実装は、トップに戻り、スムーズな移行に戻りますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。