欢迎光临!欢迎来到小司的个人网站

关键词搜索:

当前位置: 首页>前端开发>JQUERY知识>

jQuery-屏幕向下滚动显示返回顶部按钮 查看代码演示

日期:2018-05-16 编辑:admin 阅读次数:

今天主要学习在网页向下滚动过程中,屏幕右侧出现一个返回顶部的小图标,点击小图标后即可快速返回顶部。

1.依旧先写好网页结构代码:

    <!--文章主题内容-->

    <div class="content">

        <h1>文章内容文章内容文章内容</h1>

<h1>文章内容文章内容文章内容</h1>

<h1>文章内容文章内容文章内容</h1>

<h1>文章内容文章内容文章内容</h1>

    </div>     

    <!--返回顶部按钮-->

    <div class="top">

        <a href="javascript:void(0);">TOP</a>

    </div>

2.写好相应的网页结构样式:

    *{margin: 0;padding: 0;}

    body{position: relative;}

    .content{

        width: 1200px;

        height: 3000px;

        background: #f1f1f1;

        margin: 0 auto;

        padding: 100px 0 50px 0;

        text-align: center;

    }

    h1{

        margin-bottom: 500px;

    }

    .top a{

        width: 50px;

        height: 50px;

        background: #000;

        color: #fff;

        position: fixed;/*小图标固定在屏幕右下角*/

        text-align: center;

        line-height: 50px;

        top: 70%;

        right: 2%;

        text-decoration: none;

        transition:all 0.5s;

        display: none;/*让小图标先隐藏起来*/

    }

    .top a.hover{

        background:#e14da0;

    }

3.关键的JS代码:

    <script src="jquery.min.js"></script>/*引入jQuery库*/

    思路:1.利用&lsquo;scrollTop()&rsquo;值监控屏幕滚动情况,当屏幕滚动到指定位置时,让小图标显示出来:

    <script>

        $(function(){

            $(window).scroll(function () {

            /*使用&lsquo;if&rsquo;,&lsquo;else&rsquo;进行判断,当屏幕滚动到300或者更大时,小图标即显示出来,否则即隐藏*/

                if ($(window).scrollTop() >= 300) {

                    $('.top a').fadeIn(600);

                        }else{

                            $('.top a').fadeOut(600);

                        }

                });

    2.点击小图标时网页的&lsquo;scrollTop()&rsquo;值为0,利用动画效果进行过渡:

        $('.top a').click(function(){

            $("html,body").animate({

                scrollTop: 0

             }, 500);

        });

        /*鼠标经过特效,可加可不加*/

            $('.top a').hover(function(){

                $(this).addClass('hover');

                },function(){

                    $(this).removeClass('hover');

                });

            });

</script>

    4.至此一个屏幕向下滚动显示返回顶部的小插件就已经完成了,赶快试试吧!

 

补充:同理可以写出返回底部JS,

           添加返回底部结构、样式,与返回顶部一样,定位top值改一下。           

           Html:<div class="bottom">

            <a href="javascript:void(0);">底部</a>

               </div>

           CSS:只要改一下top:80%;即可

           JS:$('.bottom a').click(function(){

          $("html,body").animate({

                       scrollTop: $(document).height()/*scrollTop值=文档高度*/

           }, 500);

       });

相关文章

×