网站开发之添加返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .div1{
        width: 100%;
        height: 800px;
        background-color: #0066CC;
    }
    .div2{
        width: 100%;
        height: 800px;
        background-color:red;
    }
    .returnTop{
        height: 50px;
        width: 90px;
        background-color: ghostwhite;
        bottom:10px;
        position: fixed;
        right: 20px;
        text-align: center;
        line-height: 40px;

    }
    .hide{
            display: none;
        }
</style>


<body>

    <div class="div1"></div>
    <div class="div2">
        <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
    </div>



<script src="jquery-3.4.1.js"></script>

<script>
　　
        window.onscroll=function(){
            console.log($(window).scrollTop());
              if ($(window).scrollTop() >100)
             {
                  $(".returnTop").removeClass("hide")}
                  else {
                  $(".returnTop").addClass("hide")
              }
          }
          function returnTop() {
              $(window).scrollTop(0)
          }



</script>


</body>
</html>
中间用了Jqurey模块及一些JS的操作。