jQueryとcssで作る、フッター手前で止まる「トップへ戻るボタン」の制作手順
岡部です。
あると便利な憎いやつ、「トップへ戻るボタン」。
とりあえずcssで見た目を作るところから、スムーズにスクロール、少しスクロールすると表示、フッター手前で止まる、などの処理をひとつずつ解説していきます。
参考にさせて頂いたサイトはこちら！ありがとうございます。
jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール
Animated Scroll to Top
htmlとCSSでデザインを作る
まずはボタンがないと話が始まりません。
右下に固定で表示されているボタンを、htmlとcssでデザインします。
ポイントは、position:fixed;で位置を固定する、辺りでしょうか。
下記サンプルだとcssのみで丸や三角を表現していますが、画像を使っても良いでしょうね。
スムーズにスクロールさせる
このままでも機能としては十分役割を果たしますが、ボタンを押すといきなり上に戻ってしまうので、これをスムーズに動かしてみます。
ここから先は、jQueryを使って実装します。
実際にサイトに組み込む際は、これから実装する処理の記述よりも前に、jQuery本体を読み込んでください。
jQueryのバージョンは、1系でも2系でも動くと思います。
ボタンをふわっと表示させる
一番上にいるときにボタンが出ている必要は無いので、最初はボタンを隠しておいて、少しスクロールするとふわっと表示される処理を加えます。
フッターの手前で止める
最後に、フッターと重なるとコンテンツが隠れたりして都合が悪いケースがあるので、フッター手前で止める処理を加えます。
cssのpositionの記述に気をつけないと動かないので注意！
あとはデザインを変更したり、ボタンの出方を変えてみたり、サイト全体のテイストに合わせて自由に調整してください。
