回到页面头部

当一个页面下拉很长时，我们就显示一个一键回到顶部。

我们先要把这个Top显示出来，

CSS:

        body {
            font: .85em/1.4 "微软雅黑","Microsoft Yahei",'Arial','san-serif';
            color: #666;
            margin: 0;
            padding: 0;
        }
        a {
            color: #666;
            cursor: pointer;
        }
        a, a:hover {
                text-decoration: none;
            }
        a:focus {
               outline: none;
              }

        .animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

        @-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

   <div style="        margin-bottom: 1500px">  //页面
            啦啦啦啦啦啦啦啦
        </div>

JS:

 <script>
            $(function () {
                Test();
            })
            function Test() {
                $("body").stop().append('<a id="HGoTop" href="javascript:;" style="width:40px;height:40px;line-height:40px;border-radius:50%;display:inline-block;text-align:center;background:#333;color:#fff;position:fixed;bottom:20px;right:30px;z-index:100000;">Top</a>').find('#HGoTop').hide();
                $T = $('#HGoTop');
                $(window).on('scroll', function () {
                     //这里你可以控制多高时出现top
                    $(window).scrollTop() > 150 ? $T.removeAttr('class').addClass('animated rollIn').show() : $T.removeAttr('class').addClass('animated rollOut');
                });
                $T.on('click', function () {
                    $('body,html').animate({ scrollTop: 0 }, 500); return; //返回顶部按钮点击事件     
                });          
            }       
           
        </script>

一键到底是一样的。

 参考网站：查看

2017/08/17  再来一种回到顶部

 <style>
        #goTop {
            position: absolute;
            display: none;
            width: 50px;
            height: 48px;
            background: #EFEDED url(/Video/gotop.png) no-repeat 16px 15px;
            border: solid 1px #f9f9f8;
            border-radius: 6px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }
    </style>

  <script>
            $(function () {
                $('body').append('<div id="goTop"></div>')
                $('#goTop').click(function () {
                    $('body,html').animate({ scrollTop: 0 }, 300);
                });
            })        


            $(window).scroll(function () {
                var sc = $(window).scrollTop();
                var rwidth = $(window).width() - 100;
                var rheight = $(window).height() + $(document).scrollTop();
                if (sc > 0) {
                    $('#goTop').css('display', 'block');
                    $('#goTop').css('left', rwidth + 'px');
                    $('#goTop').css('top', (rheight - 120) + 'px');
                } else {
                    $('#goTop').css('display', 'none');
                }
            });
        </script>