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

岡部です。

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

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

htmlとCSSでデザインを作る

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

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

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

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

ボタンをふわっと表示させる

一番上にいるときにボタンが出ている必要は無いので、最初はボタンを隠しておいて、少しスクロールするとふわっと表示される処理を加えます。

フッターの手前で止める

最後に、フッターと重なるとコンテンツが隠れたりして都合が悪いケースがあるので、フッター手前で止める処理を加えます。
cssのpositionの記述に気をつけないと動かないので注意!

あとはデザインを変更したり、ボタンの出方を変えてみたり、サイト全体のテイストに合わせて自由に調整してください。

The following two tabs change content below.
岡部 征爾

岡部 征爾

取締役副社長
熊本県出身。SSCのディレクター兼デザイナー。猫飼い、バイク乗り、隙あらばライブに行きたい人。レスポンシブデザイン、WordPressが得意、three.js勉強中。企画提案からデザイン、開発まで、一通り担当してます。