jq返回頂部多種實現方法

本文轉載自查看原文 2018-10-23 18:02 1940 jquery

基礎版：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回頂部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
       .content { height: 2000px; border: 1px solid red; }
       #goToTop { position: fixed; bottom: 20px; right: 10%; }
      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #FF9966; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }
     </style>
</head>
<body>
    <div class="container">
        <div class="header"> 我是頭部</div>
        <div class="content">我是主內容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
        <div id="goToTop"><a href="javascript:;">點我回到頁面頂部</a></div>
    </div>
    <script>
    // 原始版
    $(function(){
        $('#goToTop a').click(function(){
            $('html , body').animate({scrollTop: 0},'slow');
        });
    });
    </script>
</body>
</html>

改進版：默認不顯示，滾動到一定距離顯示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回頂部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
       .content { height: 2000px; border: 1px solid red; }
       #goToTop { position: fixed; bottom: 20px; right: 10%; }
      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }
     </style>
</head>
<body>
    <div class="container">
        <div class="header"> 我是頭部</div>
        <div class="content">我是主內容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
        <div id="goToTop"><a href="javascript:;">點我返回頂部</a></div>
    </div>
    <script>
    // 改進版
    $(function(){

        $('#goToTop').hide();        //隱藏go to top按鈕

        $(window).scroll(function(){
            // console.log($(this).scrollTop());

            //當window的scrolltop距離大於1時，go to 
            if($(this).scrollTop() > 100){
                $('#goToTop').fadeIn();
            }else{
                $('#goToTop').fadeOut();
            }
        });

        $('#goToTop a').click(function(){
            $('html ,body').animate({scrollTop: 0}, 300);
            return false;
        });



    });
    </script>
</body>
</html>

加強版：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回頂部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
       .content { height: 2000px; border: 1px solid red; }
       #goToTop {position: absolute; right: -130px; z-index: 9000; }
      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }
     </style>
</head>
<body>
    <div class="container">
        <div class="header"> 我是頭部</div>
        <div class="content">我是主內容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
    </div>
    <script>
    // 加強版（兼容性基本完好）
    $(function(){

        //goToTop距瀏覽器頂端的距離，這個距離可以根據你的需求修改
        var topDistance = 500;

        //距離瀏覽器頂端多少距離開始顯示goToTop按鈕，這個距離也可以修改，但不能超過瀏覽器默認高度，為了兼容不同分辨率的瀏覽器，我建議在這里設置值為1；
        var showDistance = 1;

        //定義一個變量，方便后面加入在html元素標簽中插入這個goToTop按鈕的標簽
        var goToTopButton = $('<div id="goToTop"><a href="javascript:;">點我回到頁面頂部</a></div>');

        var thisTop = $(window).scrollTop() + topDistance;

        //在container的div里插入我們前面定義好的html標簽元素
        $('.container').append(goToTopButton);

        //設置goToTop按鈕top的css屬性和屬性值
        $('#goToTop').css('top' ,thisTop);

        if($(window).scrollTop() < showDistance){
            $('#goToTop').hide();
        }

        // 給窗口綁定一個滾動事件，當窗口滾動條滾動時執行
        $(window).scroll(function(){

            // console.log($(this).scrollTop());

            thisTop = $(this).scrollTop() + topDistance;        //獲取當前window向上滾動的距離
            $('#goToTop').css('top', thisTop);                    //修改goToTop按鈕的top距離

            console.log(thisTop);

            if($(this).scrollTop() > showDistance){
                $('#goToTop').fadeIn();
            }else{
                $('#goToTop').fadeOut();
            }

        });


        // 給按鈕綁定一個click事件，點擊按鈕時，返回頂部
        $('#goToTop a').click(function(){
            $('html ,body').animate({scrollTop: 0}, 300);
            return false;
        });
    });
    </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jq返回頂部多種實現方法 jq-animate實現返回頂部效果 jQ 移動端返回頂部代碼整理 a超鏈接之返回頂部的兩種實現方法 Web前端頁面功能——點擊按鈕返回頂部的實現方法 ActionBar實現頂部返回鍵，頂部按鈕 js返回上一頁並刷新的多種實現方法頁面返回頂部的方法總結 JavaScript實現返回頂部效果 CSS實現返回網頁頂部