CSS點擊圖片回到頭部

有時我們需要在一個網頁中讓用戶從底部回到頭部，比如一個很長的頁面列表，用戶需要不斷下拉才能看到最上面的內容，這時候就需要一個回到頂部的按鈕。而使用CSS可以實現一個比較簡單的方式來實現這個功能。

html,body {
scroll-behavior: smooth;
}
.scroll-to-top {
position: fixed;
right: 20px;
bottom: 20px;
display: none;
z-index: 9999;
}
.scroll-to-top img {
width: 50px;
height: 50px;
cursor: pointer;
}

首先我們得讓我們的頁面頂部滾動到頂部的過程變得平滑，這就需要使用CSS的scroll-behavior屬性。當這個屬性被設置成smooth時，瀏覽器將會以平滑的方式滾動到指定位置。

接下來我們需要給我們的回到頂部的按鈕定義樣式，上面的代碼就定義了一個.scroll-to-top類，它有一個固定的位置在屏幕右下角，一個默認是隱藏的模式。而我們的實際按鈕就是一個圖像，它被定義為img元素，除了設置它的寬和高，還設置了指針樣式，表示它可以被點擊。

Top

最后，我們需要使用JavaScript代碼來實現按鈕的點擊功能。上面的代碼定義了一個按鈕，并給它一個idmyBtn，當用戶滾動到距離頁面頂部20像素的位置時，這個按鈕就會顯示出來。當用戶點擊這個按鈕時，頁面就可以平滑地回到頂部了，這是通過JavaScript修改了scrollTop的值來實現的。

這樣使用CSS和JavaScript就能實現一個回到頂部的按鈕了。通過這種技術，我們可以使我們的網站變得更加友好和易用。如果您在自己的網站中使用了這種方法，您就可以幫助用戶更容易地找到自己想要的內容，同時更好地提升你的用戶體驗。