我已返回頁面頂部按鈕在我的網站，我如何動畫滾動回頂部？

Question

我已經有一個按鈕在我的HTML和CSS，當用戶向下滾動20px時出現。當您單擊該按鈕時，會將用戶返回到頁面的頂部。我希望它將動畫滾動回頂部，而不是直接跳到那裏。這裏是我的代碼：

HTML：

<button onclick="topFunction()" id="myBtn" title="Return To Top"><i class="fa fa-angle-up fa-lg"></i></button> 

CSS：

#myBtn { 
display: none; 
font-size: 2em; 
position: fixed; 
bottom: 20px; 
right: 30px; 
z-index: 99; 
border: none; 
outline: none; 
background-color: rgba(0, 0, 0, 0.5); 
color: white; 
cursor: pointer; 
padding: 15px; 
border-radius: 10px; 
-webkit-transition: color 0.5s; 
transition: color 0.5s; 
} 

#myBtn:hover { 

color: #00ff0a; 

} 

的Javascript：

window.onscroll = function() {scrollFunction()}; 

function scrollFunction() { 
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 
    document.getElementById("myBtn").style.display = "block"; 
} else { 
    document.getElementById("myBtn").style.display = "none"; 
} 
} 

// When the user clicks on the button, scroll to the top of the document 
function topFunction() { 
document.body.scrollTop = 0; // For Chrome, Safari and Opera 
document.documentElement.scrollTop = 0; // For IE and Firefox 
} 

歡迎任何幫助

Answer 1

使用.animate()功能與scrollTop是這樣的：

function topFunction() { 
    $("html, body").animate({scrollTop: "0"}); 
} 

Answer 2

您可以使用jQuery.animate()方法，以及scrollTop財產。

例子：

$(function(){ 
    $("#myBtn").click(function(e){ 
     e.preventDefault(); 
     $("html, body").animate({"scrollTop": "0px"}, 600); 
    }) 
});