jq返回頂部多種實現方法

本文轉載自查看原文 2016-04-18 14:40 25357 Jquery

直接上代碼，復制運行即可

基礎版：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回頂部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop { position: fixed; bottom: 20px; right: 10%; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是頭部</div>
17         <div class="content">我是主內容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19         <div id="goToTop"><a href="javascript:;">點我回到頁面頂部</a></div>
20     </div>
21     <script>
22     // 原始版
23     $(function(){
24         $('#goToTop a').click(function(){
25             $('html , body').animate({scrollTop: 0},'slow');
26         });
27     });
28     </script>
29 </body>
30 </html>

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

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回頂部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop { position: fixed; bottom: 20px; right: 10%; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是頭部</div>
17         <div class="content">我是主內容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19         <div id="goToTop"><a href="javascript:;">點我返回頂部</a></div>
20     </div>
21     <script>
22     // 改進版
23     $(function(){
24 
25         $('#goToTop').hide();        //隱藏go to top按鈕
26 
27         $(window).scroll(function(){
28             // console.log($(this).scrollTop());
29 
30             //當window的scrolltop距離大於1時，go to 
31             if($(this).scrollTop() > 100){
32                 $('#goToTop').fadeIn();
33             }else{
34                 $('#goToTop').fadeOut();
35             }
36         });
37 
38         $('#goToTop a').click(function(){
39             $('html ,body').animate({scrollTop: 0}, 300);
40             return false;
41         });
42 
43 
44 
45     });
46     </script>
47 </body>
48 </html>

加強版：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回頂部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop {position: absolute; right: -130px; z-index: 9000; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是頭部</div>
17         <div class="content">我是主內容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19     </div>
20     <script>
21     // 加強版（兼容性基本完好）
22     $(function(){
23 
24         //goToTop距瀏覽器頂端的距離，這個距離可以根據你的需求修改
25         var topDistance = 500;
26 
27         //距離瀏覽器頂端多少距離開始顯示goToTop按鈕，這個距離也可以修改，但不能超過瀏覽器默認高度，為了兼容不同分辨率的瀏覽器，我建議在這里設置值為1；
28         var showDistance = 1;
29 
30         //定義一個變量，方便后面加入在html元素標簽中插入這個goToTop按鈕的標簽
31         var goToTopButton = $('<div id="goToTop"><a href="javascript:;">點我回到頁面頂部</a></div>');
32 
33         var thisTop = $(window).scrollTop() + topDistance;
34 
35         //在container的div里插入我們前面定義好的html標簽元素
36         $('.container').append(goToTopButton);
37 
38         //設置goToTop按鈕top的css屬性和屬性值
39         $('#goToTop').css('top' ,thisTop);
40 
41         if($(window).scrollTop() < showDistance){
42             $('#goToTop').hide();
43         }
44 
45         // 給窗口綁定一個滾動事件，當窗口滾動條滾動時執行
46         $(window).scroll(function(){
47 
48             // console.log($(this).scrollTop());
49 
50             thisTop = $(this).scrollTop() + topDistance;        //獲取當前window向上滾動的距離
51             $('#goToTop').css('top', thisTop);                    //修改goToTop按鈕的top距離
52 
53             console.log(thisTop);
54 
55             if($(this).scrollTop() > showDistance){
56                 $('#goToTop').fadeIn();
57             }else{
58                 $('#goToTop').fadeOut();
59             }
60 
61         });
62 
63 
64         // 給按鈕綁定一個click事件，點擊按鈕時，返回頂部
65         $('#goToTop a').click(function(){
66             $('html ,body').animate({scrollTop: 0}, 300);
67             return false;
68         });
69     });
70     </script>
71 </body>
72 </html>

插件版1：

<!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>
    // 編寫jQuery返回頂部插件
    jQuery.fn.goToTop = function(){
        
        // 判斷如果窗口滾動距離小於0，隱藏按鈕
        if($(window).scrollTop() < 0){
            $('#goToTop').hide();
        }

        // 窗口滾動時，判斷當前窗口滾動距離
        $(window).scroll(function(){
            if($(this).scrollTop() > 1){
                $('#goToTop').fadeIn();
            }else{
                $('#goToTop').fadeOut();
            }
        });

        // 給這個按鈕綁定一個click事件
        this.bind('click',function(){
            $('html ,body').animate({scrollTop: 0},500);
            return false;
        });
    };

    //調用這個插件
    $(function(){
        $('#goToTop').goToTop();
    });

    </script>
</body>
</html>

插件版2：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回頂部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10        #goToTop { position: fixed; right: 10%; z-index: 9000; bottom: 10px; }
11       #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是頭部</div>
17         <div class="content">我是主內容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19     </div>
20     <script type="text/javascript">
21    //編寫一個插件叫做goToTop
22     jQuery.fn.goToTop = function(settings) {
23         settings = jQuery.extend({
24             min: 1,  //設置距離頂部的最小值為1
25             fadeSpeed: 200,  //設置一個淡出淡入的速度
26             ieOffset: 50  //處理IE的兼容問題
27         },settings);
28         return this.each(function(){
29             //listen for scroll
30             var el = $(this);
31             el.css("display","none");//in case the user forgot
32             $(window).scroll(function(){
33                 //stupid IE hack
34                 if(!jQuery.support.hrefNormalized) {  //設置這個按鈕的css屬性
35                     el.css({
36                         "position": "absolute",
37                         "top" : $(window).scrollTop() + $(window).height() - settings.ieOffset
38                     });
39                 }
40                
41 
42                 if($(window).scrollTop() >= settings.min) {
43                     el.fadeIn(settings.fadeSpeed);
44                 } else {
45                     el.fadeOut(settings.fadeSpeed);
46                 }
47             });
48         });
49     };
50     
51 
52     $(function(){
53         var goToTopButton = "<div id='goToTop'><a href='javascript:;'>點我回到頁面頂部</a></div>";
54         $("div.container").append(goToTopButton);  //插入按鈕的html標簽
55         if($(window).scrollTop() < 1) {
56             $("#goToTop").hide();//滾動條距離頂端的距離小於showDistance是隱藏goToTop按鈕
57         }
58       
59 
60         $("#goToTop").goToTop({
61             min:1,
62             fadeSpeed: 500
63         });
64       
65 
66         $("#goToTop").click(function(e){
67             e.preventDefault();
68             $("html,body").animate({scrollTop:0},"slow");
69         });
70     });
71 </script>
72 </body>
73 </html>

另外一個版本實現：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回頂部</title>
 6     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 7     <style type="text/css">
 8        .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
 9        .content { height: 2000px; border: 1px solid red; }
10         #goToTop {  position: fixed; right: 10%; z-index: 9000; top: 100%; margin-top: -50px;}
11         #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; }
12      </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="header"> 我是頭部</div>
17         <div class="content">我是主內容，高度是2000px</div>
18         <div class="footer">我是在最底部</div>
19     </div>
20     <script type="text/javascript">
21          $(function(){
22             var topPosition = "<div id='top'></div>"; //定義頂部錨點的標簽
23             var goToTopButton = "<div id='goToTop'><a href='#'>點我回到頁面頂部</a></div>";  //定義按鈕標簽
24             $("div.container").prepend(topPosition); //在container的div最前面加上錨點標簽
25             $("div.container").append(goToTopButton); //在container的div最后面加上按鈕標簽
26             if($(window).scrollTop() < 1) {
27                 $("#goToTop").hide();  //滾動條距離頂端的距離小於showDistance是隱藏goToTop按鈕
28             }
29             var scroll_timer;
30             var displayed = false;
31             var $window = $(window);
32             var top = $(".container").children(0).position().top;
33             $window.scroll(function(){
34                 window.clearTimeout(scroll_timer);
35                 scroll_timer = window.setTimeout(function(){
36                     if($window.scrollTop() <= top) {
37                         displayed= false;
38                         $("#goToTop").fadeOut(500);
39                     } else if(displayed == false) { //show if scrolling down
40                         displayed = true;
41                         $("#goToTop").stop(true,true).show().click(function(){
42                             $("#goToTop").fadeOut(500);
43                         });
44                     }
45                 },100);
46             });
47         });
48     </script>
49 </body>
50 </html>

免責聲明！

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

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