小火箭返回顶部

网页中常常会有一个 返回顶部的功能，恰巧我这天写到了，在网上找了一下思路，下面就写了一个案例：

效果预览：https://li_shang_shan.gitee.io/small_rocket_back_to_top。

代码就直接粘贴了：

<html>
    <head>
        <meta charset="utf-8" />
        <title>返回顶部插件</title>
    </head>
    <style type="text/css">
        body{
            background: url(img/bg.jpg) 100%;
            text-align: center;
        }
        .bg_top{
            width: 100px;
            height: 110px;
            position: fixed;
            right: 30px;
            bottom: 50px;
            display: none;
            
        }
        .bg_top img{
            width: 100px;
            height: 110px;
            transition: all 1s ease 0s; 
            cursor: pointer;
            opacity: 0.6;
        }
        .yun{
            width: 300px;
            margin: 0 auto;
        }
        h4{
            margin: 30px auto;
            font-size: 35px
            color: rgb(0,0,0);
        }
    </style>
    <body>
        <h4>往下滑动滚动条出现小火箭</h4>
        <img src="./img/yunceng.jpg" class="yun">
        <div class="bg_top">
            <img src="./img/小火箭.gif" >
        </div>
        <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $(window).scroll(function () {
                        var scroll_top = $(document).scrollTop();
                        if (scroll_top > 400) {               //当向下滚动400px时,出现返回顶部链接
                            $(".bg_top").show(300);
                        } else {
                            $(".bg_top").hide(300);
                        }
                    });
                    $(".bg_top").click(function () {
                        $("html,body").animate({scrollTop:0}, 1000);
                    });
                    $(".bg_top img").hover(function(){
                        $(this).css({
                            "opacity":1,
                            "width":"90",
                            "margin-top":"10px",
                        });        
                    },function(){
                        $(this).css({
                            "opacity":0.6,
                            "width":"100",
                            "margin-top":"0",
                        });
                    });
            });
        </script>
    </body>
</html>

置顶的小火箭可以在网上找，或者去矢量图库下载，用个箭头或者图片代替都OK

个人学习，内容简略。

posted @ 2020-07-15 19:52  一生的风景  阅读(499)  评论(0)  编辑  收藏  举报