Scroll case: return to top with animation

Case study ： Back to top with animation

css style

   .box {
    
            width: 800px;
            height: 400px;
            background-color: blanchedalmond;
            margin: 500px auto;
        }
        
        .box2 {
    
            position: fixed;
            right: 10px;
            top: 50%;
            display: none;
            width: 50px;
            height: 50px;
            background-color: red;
        }

html

  <div class=box></div>
  <div class="box2"> Return to the top </div>

jQuery Code
ps: animate Only elements can be animated

$(function() {
    
      var box = $(".box").offset().top; // obtain box2 Head distance  
      $(window).scroll(function() {
    
          if ($(document).scrollTop() >= box) {
     // If   Scroll to box2 Distance of   Just box2 Will be displayed 
              $(".box2").css("display", "block")
          } else {
    
              $(".box2").css("display", "none")
          }
      })
      $(".box2").click(function() {
    
          $("body,html").stop().animate({
     //animate  Only elements can be animated 
              scrollTop: 0
          })
      })
  })