使用jQuery滾動到頂部（設置時間：2分鐘）

快速創建網站回到頂部滾動功能 (設置時間：2分鐘)

本指南將逐步指導您如何在網站上設置“回到頂部”功能。只需向下滾動本頁面即可查看演示。

1. 下載scrollTo插件並包含它。
2. 獲取一個圖像（箭頭或類似的）。
3. 包含以下HTML代碼。
4. 包含以下jQuery/JavaScript代碼來捕獲窗口滾動並處理圖像的顯示。
5. 就這麼簡單！

HTML

<code class="language-html"><a id="scroll-to-top" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036397399855.png" class="lazy" alt="Scroll to Top Using jQuery (Setup time: 2mins) ">
</a></code>

jQuery

這段jQuery代碼會在用戶向下滾動時顯示圖像，向上滾動時隱藏圖像，並處理點擊事件。

<code class="language-javascript">$(document).ready(function() {
    var $scrollTop = $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top');

    $(window).scroll(function() {
        // 向上滚动
        if ($(this).scrollTop() > 100) {
            $scrollTop.fadeIn(1000);
        } else {
            $scrollTop.hide();
        }
    });

    $scrollTop.click(function(e) {
        e.preventDefault();
        $.scrollTo(0, 1000); // 使用scrollTo插件
    });
});</code>

注意：如果您需要跨瀏覽器兼容的解決方案，請使用以下代碼：

<code class="language-javascript">window.scrollTo(0, 0); // Chrome滚动到顶部错误修复</code>

CSS

這段簡單的CSS代碼用於處理圖像的顯示和跨瀏覽器的透明度。

<code class="language-css">https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    opacity: 0.5; /* 简化透明度设置 */
    transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top:hover {
    opacity: 1.0; /* 简化透明度设置 */
}</code>

jQuery ScrollTop 常見問題解答 (FAQs)

如何使用 jQuery ScrollTop 滾動到頁面上的特定元素？

要使用 jQuery ScrollTop 滾動到頁面上的特定元素，您需要首先使用 jQuery 選擇器選擇該元素，然後使用 scrollTop 方法。以下是一個示例：

<code class="language-javascript">$('html, body').animate({
    scrollTop: $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top
}, 2000);</code>

在此代碼中，“https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement” 是您要滾動到的元素的 ID，2000 是滾動動畫的持續時間（以毫秒為單位）。這將在 2 秒內平滑地將頁面滾動到指定的元素。

我可以不使用動畫來使用 jQuery ScrollTop 嗎？

可以，您可以不使用動畫來使用 jQuery ScrollTop。 jQuery 中的 animate 方法對於 scrollTop 不是必需的。以下是如何操作：

<code class="language-javascript">$('html, body').scrollTop($("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top);</code>

這將立即將頁面滾動到指定的元素。

（後續FAQ內容與原文一致，略去重複部分，避免冗餘。）

以上是使用jQuery滾動到頂部（設置時間：2分鐘）的詳細內容。更多資訊請關注PHP中文網其他相關文章！