<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .container{
   background-color:#C4C4C4;
   height:1500px;
   width:600px;}
#src-to-top{
height:40px;
width::40px;
color:#fff;
position:fixed;
right:20px;
bottom:20px;
background-color:#AEAEAE;
}
 
.showTop{
display:none;}
    </style>
     <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <div class="container"></div>
    <div id="src-to-top" class="showTop"><strong>TOP</strong></div>
    <script>
$(document).ready(function(e) {
//窗口滚动事件中 实现top按钮的显示与隐藏
window.οnscrοll=function(){
var scroT=$(window).scrollTop()
if(scroT>600){
$("#src-to-top").removeClass("showTop");
}else{
$("#src-to-top").addClass("showTop");
}
}
//实现 top单击回到顶部的事件
var istt=$("#src-to-top");
istt[0].οnclick=function(){
$(window).scrollTop(0);
}
            });
    </script>
</body>
</html>