jquery如何實現點擊網頁回到頂部效果？（圖文+影片）-css知識-PHP中文網

首頁

每日程式設計

css知識

jquery如何實現點擊網頁回到頂部效果？（圖文+影片）

藏色散人

Oct 13, 2018 pm 01:53 PM

jquery

本篇文章主要跟大家介紹如何用jquery程式碼實現網頁回到頂部的效果。

我們在瀏覽各大網站頁面時，想必大家肯定都遇過，當閱覽一個長頁面時，拉到下面部分會出現類似回到頂部的按鈕特效吧。

這種點擊回到頂部的功能特效，可以很大程度地提高使用者體驗。那麼實現這樣的功能也是非常簡單的。

下面我們就透過簡單的程式碼範例，為大家介紹用jquery實作點擊回到頂部的功能方法。

<!DOCTYPE html>
<html>
<head>
    <title>回到顶部特效</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body {
            text-align: center;
        }
        h1 {
            width: 1200px;
            height: 1500px;
            background: #eee;
            margin: 30px auto;
        }
        a {
            text-decoration: none;
            color: #fff;
        }
        p#back {
            text-align: center;
            position: fixed;
            bottom: 100px;
            right: 60px;
            background: #000;
            border-radius: 3px;
            height: 50px;
            width: 80px;
            display: none;
        }
    </style>
</head>
<body>
<h1 id="网页内容">网页内容</h1>
<a href=""><p id="back"><br> 返回顶部</p></a>
</body>
<script>
    // 文档就绪
    $(function () {
        // 获取浏览器窗口
        $(window).scroll(function () {
            // 获取浏览器滚动条距离顶部的高度
            if ($(window).scrollTop() > 150) {
                // 设置按钮出现
                $(&#39;#back&#39;).fadeIn(1000)
            } else {
                // 设置按钮消失
                $(&#39;#back&#39;).fadeOut(1000)
            }
        })
    })
</script>
</html>

此段程式碼中我們主要引用了一個jquery的線上庫，並寫了一些簡單的HTML頁面和js程式碼判斷，當滾動條距頂部的高度大於150的話，則設定按鈕出現，相反則設定按鈕隱藏。最後透過瀏覽器訪問，效果如下：

jquery如何實現點擊網頁回到頂部效果？（圖文+影片）