在網頁制作中，通常我們需要讓頁面內長內容的用戶可以快速回到頁面的頂部，這時候就需要用到回到頁首的功能。
那么該如何實現呢？下面我們一起來學習一下吧。

<style>
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
font-size: 14px;
z-index: 999;
cursor: pointer;
}
</style>
<!-- HTML -->
<a id="back-to-top" href="#" title="回到頂部"><i class="iconfont">?</i></a>
<!-- JS -->
var btn = $('#back-to-top');
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '1500');
});

上述代碼中，css代碼主要是設置回到頁首按鈕的樣式。
而html代碼則是用了一個a標簽來創建回到頁首的按鈕。需要特別注意的是，id名必須為“back-to-top”。
最后，js代碼主要是用來添加點擊事件，當用戶點擊回到頁首按鈕后，會通過動畫使頁面滾動到頂部。