DAY22:スムーススクロールとフローティングアイテムを作る

内部リンクをクリックした時に「ぐいーん」と移動した方がページ内を移動していることが理解できて少し親切だと思います。この動きのことをスムーススクロールと呼んだりします(呼び方はスムーズスクロールの説もあり)

そして、スムーススクロールと関連するところとして、「トップへ戻る」のボタンがあります。スクロールしたらフワッと表示させる効果もよくあるので、一緒に作っていきましょう!

課題:スムーススクロールを作る

グローバルメニューをクリックした時のページ内リンクをスムーススクロールで「グイーン」と移動できるようにしてください!

また、ヘッダーのメニューをクリックした時には対応するセクションへスムーススクロールで移動させ、メインビジュアルの「お問い合わせ」ボタンは、Contactのセクションに移動するようにしてください。

「jQuery 上級編」の復習

jQuery 学習コース 上級編の「ページ内を移動しよう」を復習しながら、スムーススクロールを作成してみてください!

固定ヘッダーを考慮できるように少しだけ作り直していただく必要があるかもしれません。

スムーススクロールのライブラリ

ライブラリを使ってサクッと実装するのもいいかと思います。

スムーズな移動!「smooth-scroll.js」で固定ヘッダーも考慮したページ内リンク

ただ、簡単に自作できるので、自分用に作っておくのがいいかと!

課題2:「トップへ戻る」をフローティングアイテムにする

そして、「トップへ戻る」ボタンをスクロールしたら「フワッと」表示されるように変更してください。かつ、常に右下で固定されているような感じにします。

以下の記事が参考になるかもしれません。

スクロールの途中で出現するフローティングボタンのJavaScript

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事