小火箭返回顶部(有源代码)

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

效果图

小火箭返回顶部(有源代码)
<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>
相关文件下载地址
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!

原创文章,作者:27149,如若转载,请注明出处:http://wpbbw.com/104.html