这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

前言：

哈喽，小伙伴们大家好啊，周五终于到来，让我们欢呼的时刻，更文挑战也要如期进行呀，前端小白不迷路 - 今天jQuery轻松实现'点击按钮返回页面顶部'。

场景分析

在许多网站我们都会见到，当页面滚动到一定位置的时候，为了更好的用户体验，都会在下面出现一个‘返回顶部’的图标，用户点击该图标，会回到页面顶部。

这个效果其实并没有想象中那么复杂，需要了解scrollTop()这个API ，这个是jQuery中的方法，该方法返回或设置匹配元素的滚动条的垂直位置，当在页面顶部时，位置是0。

所以通过$(window).scrollTop()就可以拿到滚动条的实时位置，只要判断这个值超过一定高度，就执行我们的显示“返回顶部”图标的代码，点击图标，再执行将滚动条高度变为0，然后加上动画效果即可实现。

实现步骤：

引入jquery.js
创建一个div的盒子，设置背景宽高，固定定位，背景填充图片，以及初始display值为none，不显示
拿到滚动条的位置，判断是否超过指定高度，当超过的时候，让盒子显示，否则盒子隐藏
点击盒子，滚动到页面最顶部，也就是滚动条的垂直高度为0.

完整代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
    body {
        height: 4000px;
    }
    .goTop {
        position: fixed;
        bottom: 50px;
        right: 0px;
        width: 80px;
        height: 50px;
        display: none;
        z-index: 100;
        background: url(images/gotop.jpg) no-repeat;
        background-size: contain;
    }
    </style>
</head>
 
<body>
    <div class="goTop"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(function() {
        var $goTop = $(".goTop");
        $(window).scroll(function() {
            var high = $(window).scrollTop();
            // 三元表达式进行高度判断
            high >=2000 ? $goTop.fadeIn() : $goTop.fadeOut
            
        })
          // 给html做动画，修改html的scrollTop
          // 写上html，body 是为了更好的兼容更多的浏览器 
          $("html, body").animate({
            scrollTop: 0
          });
        })
 
    });
    </script>
</body>
 
</html>