首頁  >  文章  >  每日程式設計  >  jquery如何實現點擊網頁回到頂部效果? (圖文+影片)

jquery如何實現點擊網頁回到頂部效果? (圖文+影片)

藏色散人
藏色散人原創
2018-10-13 13:53:486560瀏覽

本篇文章主要跟大家介紹如何用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>网页内容</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如何實現點擊網頁回到頂部效果? (圖文+影片)

然後我們拖曳滾動條往下,會緩慢出現回到頂部的按鈕,效果如下圖:

jquery如何實現點擊網頁回到頂部效果? (圖文+影片)

注意:

fadeIn() 方法使用淡入效果來顯示被選元素,假如該元素是隱藏的。 (本例中,參數設為1000毫秒,表示選定元素的淡入過渡時間為1000毫秒,如果設為0,則會立即出現被選元素。)

##fadeOut() 方法使用淡出效果來隱藏被選元素,假如該元素是隱藏的。 (參數同上)

這篇文章就是關於

jquery實現網頁回到頂部的效果方法介紹,簡單易懂,希望對需要的朋友有所幫助!

想要了解更多前端相關知識,可以關注PHP中文網

jQuery影片教學 HTML影片教學CSS影片教學Bootstrap影片教學等等相關影片教程,歡迎大家參考學習!

以上是jquery如何實現點擊網頁回到頂部效果? (圖文+影片)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn