基于jquery三步实现web页面一键返回页面顶部效果(提供图标和jquery-3.2.1.min.js资源下载)

一、准备资源(下载)

jquery-3.2.1.min.js
回到顶部按钮图标 (两个图标任选一个)

链接：https://pan.baidu.com/s/1HNCdGk9DEDj3A0s7GcrqvA
提取码：5tpw

二、演示效果

三、实现 ：在HTML页面的body标签内加入如下代码：

<!--回到顶部-->
<div>
    <a href="javascript:void(0)" id="gotop" style="width:50px; height:50px; position:fixed; right:10px; bottom:10px;
         background:url('你的回到顶部图标路径') no-repeat;">  
    </a>
</div>

再加入jquery代码

<script src="你的jquery js文件路径"></script>
<script>
        //当滚动条的位置处于距顶部20像素以下时，回到顶部按钮出现，否则消失
        $(function() {
            //首先将#gotop隐藏
            $("#gotop").hide();

            $(window).scroll(function() {
                if ($(window).scrollTop() > 20) {
                // 回到顶部按钮的fadeIn出现时间为200ms
                    $("#gotop").fadeIn(200);
                } else {
                // 回到顶部按钮的fadeOut消失时间为200ms
                    $("#gotop").fadeOut(200);
                }
            });

            //当点击跳转链接后，回到页面顶部位置 回到顶部时间为500ms
            $("#gotop").click(function() {
                $('body,html').animate({
                        scrollTop: 0
                    },
                    500);
                return false;
            });
        });


</script>