Hola, tengo este código, pero necesito agregarle una animación de desplazamiento suave para que se vea bien, pero no sé cómo codificar o escribir una línea. hace que el usuario se sienta bien al ver otras cosas mientras se desplaza automáticamente al elemento

 ''' <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>'''