上に戻るボタンの簡単な作り方

2019/02/19

サイトトップにするするーっと戻るボタン、今では大体のサイトに設置されていますよね。
今回はそのボタンの作り方を備忘録を兼ねて紹介します。

コード

See the Pen
aXXQWG
by cotaluna (@cotaluna)
on CodePen.

解説

HTMLは、divを参考にしてください。
classは装飾用、data属性はjQueryで取得しイベントを発火させるために使います。
装飾するためのセレクタとjQueryで取得するセレクタは、分けたおいたほうが無難だと思います。

CSSはお好みで変更してもらえればと思いますが、HTMLで空のspanなど余計な記述をしなくていいようにしてあります。

jQueryでは、HTMLで記述した「data-top」にクリックイベントを設定しています。
html、body全体をスクロール値0のところまでアニメーションさせる、というような意味になっています。
animate関数は上に戻るボタン以外でもよく使うものなので、覚えておくと便利ですね!

関連記事