一个返回顶部样式

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

效果是下面这样的
逗比

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;-webkit-transform: translateZ(0);}

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>

附件

scroll.png

本站采用CC BY-NC-SA 4.0协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://doub1.com/92.html 最后更新时间为:2019年03月14日

已有 3 条评论

  1. Don't Miss
    Don't Miss Chrome 71 10
    回复

    我也改了下样式 https://xiaojw.xyz 谢谢

    1. Summer
      Summer Chrome 71 10
      回复

      哈哈

  2. 菜鸟日记
    菜鸟日记 Chrome 63 7
    回复

    挺有意思的效果