页面载入中...

小猫返回顶部

小猫咪## HTML部分

下面代码插入到<body>内(一般习惯是插入到footer)

<div id="to-top" class="back-to-top"></div>

css部分

/ to-top  /
.back-to-top {position: fixed;
    top: -900px;
    right: 140px;
    z-index: 2;
    width: 70px;
    height: 900px;
    background: url(https://img.qianxia.me/blog/scroll.png);
    opacity: 1;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

js部分

你必须引入jQuery

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js";></script>

然后在jQuery后引入这段代码

<script type="text/javascript" >
    $(function() {
        $(window).scroll(function() {
                var scroHei = $(window).scrollTop();//滚动的高度
                if (scroHei > 500) {
                   $('.back-to-top').css('top','-200px');
                } else {                                                
                    $('.back-to-top').css('top','-999px');

                }
            })
            /点击返回顶部/
        $('.back-to-top').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 600);/600为滚动速度/
        })
    })
    </script>

动画

最后你可以加入图片浮动动画

@-webkit-keyframes float {0% {-webkit-transform:translateY(0);transform:translateY(0)}
50% {-webkit-transform:translateY(-6px);transform:translateY(-6px)}
100% {-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes float {0% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
50% {-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}
100% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.back-to-top {-webkit-animation:float 2s linear infinite;animation:float 2s linear infinite;}
.back-to-top {-webkit-animation:float 1s linear infinite;animation:float 1s linear infinite}
.back-to-top {-webkit-animation:float 3s linear infinite;animation:float 3s linear infinite}

附件

小猫返回顶部