CSS實現回到頂部且平滑過渡

在CSS 中實現一個帶有平滑過渡效果的回到頂部按鈕，需要以下步驟：添加帶有id="back-to-top" 的元素；將按鈕設置為固定定位，添加樣式（包括初始透明度為0）；在按鈕懸停時將透明度設置為1，並添加平滑過渡效果；使用JavaScript 為按鈕添加滾動檢測功能，在滾動超過100 像素時顯示按鈕，點擊按鈕時平滑滾動到頂部。

如何在CSS 中實現回到頂部且平滑過渡

回到頂部按鈕是一個有用的功能，可以方便用戶快速返回網頁頂部。要使用CSS 實現一個帶有平滑過渡效果的回到頂部按鈕，可以按照以下步驟操作：

步驟1：HTML

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

在網頁的元素中添加一個帶有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中文網其他相關文章！