浅夏

小猫返回顶部
前几天看到的蛮有趣的返回顶部样式,于是就扒下来了。效果是下面这样的HTML部分下面代码插入到<body>...
扫描右侧二维码阅读全文
25
2018/12

小猫返回顶部

前几天看到的蛮有趣的返回顶部样式,于是就扒下来了。

效果是下面这样的
逗比

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}

附件

scroll.png scroll-1.png demo.zip

最后修改:2019 年 10 月 09 日 06 : 29 PM
Buy me a cup of coffee ☕.

发表评论