緒言
前回はホームページの基本形まで作りました．今回はクリックしたら滑らかにスクロールし，ページの最上部に戻るボタンの作り方を紹介します．前回と同様にHTMLとCSS，及びJavaScirptのみで構成される静的サイトなのでシンプルに実装できます．
開発環境
- Windows 11 Home 24H2
- Visual Studio Code 1.100.3
作り方
まず，ボタンがクリックされたらページの最上部にスクロールする処理をJavaScriptで記述します．また，ボタンの配置や見た目はHTMLとCSSで調整します．以下に作例を示します．
See the Pen scroll_top by ryo (@ricelectric) on CodePen.
ボタンはページの最下部に表示されます．マウスのカーソルを合わせた際に背景色と文字色が変化するようなアニメーションも実装してみました．これを前回のホームページに実装し，そのバージョンをGitHubに公開しました．こちらからダウンロードできます．
Google Fonts
今回は矢印のボタンを作るため，Googleが提供するアイコンフォントを使ってみました．商用利用可能，かつ，無料なので安心して使えます．自前で画像ファイルを用意する手間が省けるため，とても便利でした．使い方は公式ページに載っている通り，必要なスタイルシートを読み込むだけです．
結言
今回は色々なサイトで見かけることも多いトップに戻るボタンを実装してみました．ご参考になれば幸いです．