通过window对象的scrollTop()实现，$(window).scrollTop()表示滚动条距离上方的距离，$(window).scrollTop(0)表示设置距离为0即返回顶部
<head> <meta charset="UTF-8"> <title>console</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.js"></script> <style> *{margin: 0;padding: 0} div {height: 1000px;background: pink} button{height:30px;width:80px;position:fixed;bottom:5px;right:5px} .hide{display:none} <!--如果class包含hide则不显示--> </style> </head> <div> 内容区 </div> <button class="returnTop hide" onclick="returnTop()">返回顶部</button> <script> window.onscroll=function () { //滚动条事件 if ($(window).scrollTop()>250){ $('.returnTop').removeClass('hide') //如果滚动条距离上方超过250px，则删除按钮的hide，即显示“返回顶部”按钮 } else{ $('.returnTop').addClass('hide')} //如果滚动条距离上方不超过250px，则增加按钮的hide，即不显示“返回顶部”按钮 } function returnTop() { $(window).scrollTop(0) //如果点击“返回顶部”按钮，设置滚动条距离上方距离为0，即返回顶部 } </script>