zoukankan      html  css  js  c++  java

  • jq返回顶部多种实现方法

    直接上代码，复制运行即可

    基础版：

     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>
  • 相关阅读:
    localStorage用法
    es6写法
    div滚动条
    搜索框聚焦和失焦
    初步理解前端模块化开发
    clam安装
    div行高不确定，文字和图片居中
    html页面设置<span>的高度和宽度
    一款好用的wangEditor编辑器
    3月23 防360网页的示意图
  • 原文地址：https://www.cnblogs.com/bokebi520/p/5404404.html
Copyright © 2011-2022 走看看