Hi i have this code but i need to add some smooth scroll animation to it to make it look nice ,but i dont know how to code or write a line can someone help me where to write the code to smooth scroll to the element and it makes the user feel good seeing other stuff while it auto scrolls to the element

 '''
 <a href="#413695047492935501"><p align="center"> <button class="btn btn1">Download</button> 
 </p></a>


 <style>
  body{
  margin: 0;
  padding: 0;
  }
  .middle{
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-50%,-50%);
  text-align: center;
  }
 .btn1{
  background: #47B2FF;
  border: 2px solid #000000;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  padding: 10px 60px;
  min-width: 300px;
  cursor: pointer;
  transition: color 0.4s linear;
  position: relative;
  }
 .btn1:hover{
 color: #fff;
 }
 .btn1::before{
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #000;
 z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}
.btn1::before{
 transform: scaleX(0);
 }
.btn2::before{
 transform: scaleY(0);
 }
 .btn1:hover::before{
 transform: scaleX(1);
 }
.btn2:hover::before{
 transform: scaleY(1);
 }
 </style>

 <script>$('#413695047492935501').onclick=function(){$('html, body').animate({scrollTop: 
 $("413695047492935501").offset().top}, 2000);}</script>'''