jQueryとcssで作る、フッター手前で止まる「トップへ戻るボタン」の制作手順

2016.08.02

岡部です。

あると便利な憎いやつ、「トップへ戻るボタン」。
とりあえずcssで見た目を作るところから、スムーズにスクロール、少しスクロールすると表示、フッター手前で止まる、などの処理をひとつずつ解説していきます。

参考にさせて頂いたサイトはこちら！ありがとうございます。
jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール
 Animated Scroll to Top

htmlとCSSでデザインを作る

まずはボタンがないと話が始まりません。
右下に固定で表示されているボタンを、htmlとcssでデザインします。
ポイントは、position:fixed;で位置を固定する、辺りでしょうか。
下記サンプルだとcssのみで丸や三角を表現していますが、画像を使っても良いでしょうね。

スムーズにスクロールさせる

このままでも機能としては十分役割を果たしますが、ボタンを押すといきなり上に戻ってしまうので、これをスムーズに動かしてみます。
ここから先は、jQueryを使って実装します。
実際にサイトに組み込む際は、これから実装する処理の記述よりも前に、jQuery本体を読み込んでください。

jQueryのバージョンは、1系でも2系でも動くと思います。