我在“滾動到頂部”按鈕上使用的是插件,但是現在我已將其替換為不使用任何JAVAScript的簡單html/css解決方案。
添加HTML標記
實施此解決方案非常容易,你需要做的第一件事是在網站HTML的 <body> 標記下方添加一個空白超鏈接:
<a name="top"></a>
完成此操作后,現在所需要做的就是在網頁上添加以下鏈接:
<a href="#top">Back To Top</a>
該鏈接引用頁面頂部的空白鏈接,因此,當有人單擊該鏈接時,他們將被帶回到頁面頂部。
平滑滾動
就是這樣,你無需執行其他任何操作。現在,你可以使用滾動到頂部的按鈕,并且不需要任何JavaScript。但是,你可能會注意到,當你單擊Back To Top鏈接時,頁面將直接跳到頂部。
雖然這樣做是可行的,但當頁面從一端跳到另一端時,非常刺眼。一個更好的方法是實現平滑滾動。這將模擬用戶滾動回到頁面的頂部,而不是直接跳轉到那里。
平滑滾動也非常易于實現,不需要任何JavaScript。打開CSS樣式表并添加以下內容:
html {
scroll-behavior: smooth;
}
注意:并非所有瀏覽器都支持 scroll-behavior,但是對于那些支持的瀏覽器而言,這是一種更好的體驗。