实现页面的回到顶部功能

页面的几个属性介绍

$(window).scrollTop()：当前滚动的窗口顶端到整个页面窗口顶端的距离
$(window).scrollLeft()：当前滚动的窗口左端到整个页面的窗口左端的距离      
$(window).height()：当前可视化页面窗口的宽度
$(document).height()：整个页面的高度

相关判断

1.让页面回到顶部，就是让window.scrollTop = 0;为了添加动画效果，我们可以使用Jquery中的animate函数

2.Jquery.animate({},time);第一个参数为指定对应的对象需要动画特效改变的属性以及属性值，第二个参数指定动画持续的时间

3.当window.scrollTop的值小于window.height()时，这时候应该让回到顶部按钮隐藏，我们可以设置window.onscroll事件

实现代码

<button type="button" class="btn" id="returntop">返回顶部</button>
<!--设置相应的样式-->
<style>
    #returntop{
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: rgba(128, 128, 128, 0.48);
        color: rgba(0, 0, 0, 0.39);;
        z-index: 888;
    }
    #returntop:hover{
        background: rgba(128,128,128,0.78);
        color: tgba(0,0,0,0.69);
    }
</style>
<!--核心JS代码-->
<script>
    <!--设置window.scroll事件，当window.scrollTop > window.height时即显示返回顶部按钮-->
    $(window).on("scroll",function(){
        if($(window).scrollTop() > $(window).height())
            $("#returntop").fadeIn();
        else
            $("#returntop").fadeOut();
    });
    <!--页面加载时调用一次，进行判断，因为按钮刚开始没有滚动时默认存在-->
    $(window).trigger("scroll");
    <!--设置returntop.click事件-->
    $("#returntop").click(function(){
        $("body").animate({
            scrollTop: 0
        },500);
    });
</script>