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

效果是下面这样的
逗比

HTML部分

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

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

css部分

/*to-top*/
.back-to-top {cursor:pointer;position:fixed;right:50px;top:-900px;z-index:999;width:70px;height:900px;background:url(scroll.png);transition:all .5s ease-in-out;opacity:1;box-sizing:border-box;bottom:-100px;padding:0 6px;font-size:12px;text-align:center;}

js部分

你必须引入jQuery

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

然后在jQuery后引入这段代码

<script type="text/javascript">
    $(function(){
        var r = $("#to-top"),
            o = $(window).height() - 980 + "px";
            $(window).scroll(function() {
                $(window).scrollTop() > 700 && "-900px" === r.css("top") ? r.css("top", o) : $(window).scrollTop() <= 700 && "-900px" !== r.css("top") && r.css("top", "-900px")
            });
      $('#to-top').on('click',function(){
            $('html,body').animate({'scrollTop':0},500);
        });
      });
    </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