jquery实现返回顶部功能

先来看看效果，当滚动的距离超过蓝色方块的时候，就会显示返回顶部的文字，这时候点击返回顶部就会自动返回顶部

<style>body {height: 2000px;}.back {position: fixed;width: 100px;height: 50px;right: 30px;bottom: 100px;display: none;}.container {width: 900px;height: 500px;background-color: skyblue;margin: 400px auto;}</style><div class="back">返回顶部</div><div class="container"></div>

<script>$(function () {$(window).scroll(function () {//检测滚走的高度var scrollT = $(document).scrollTop();//当滚走的高度>=400(天蓝色色块的上边距)，//显示返回顶部(.back)，否则隐藏返回顶部//获取蓝色色块(container)距离文档顶部的距离var offsetT = $(".container").offset().top;//进行判断if (scrollT >= offsetT) {$(".back").show()} else {$(".back").hide()}})//点击返回顶部，页面滚走的距离设置为0$(".back").click(function(){//生硬的返回// $(document).scrollTop(0)//动感的返回//animate({键:值},时间) 属性：scrollTop---必须是被元素调用$("html,body").animate({scrollTop:0},1000)})})</script>