30DAYSトライアル2ndまとめ【DAY23】

30DAYSトライアル DAY23の課題は『スムーススクロールとフローティングアイテムを作る』になります。

引き続きDAY22までのコードにjQueryで動きをつけていきます。

スムーススクロールとは

30DAYSトライアル DAY23で実装するスムーススクロールとはjQueryで特になにも動きをつけていないと内部リンクをクリックした時に一瞬で該当の箇所まで遷移します。

そのため、場合によっては何がおきたか分かり憎かったりしてしまうことがありますよね。

それを解決するために内部リンクをクリックした時に、該当の場所までスクロールして移動させるようにする。

これが「スムーススクロール」になります。

こうすることで、ユーザーに対してページ内を移動しているということを視覚的に分かってもあることができます。

イメージは下記のような感じですね。

#30DAYSトライアル 2nd DAY23 『スムーススクロールとフローティングアイテムを作る』
Progateとはにわまん(@haniwa008)さんの記事を参考にして完了。
これをBoostNoteにスニペットとしてちゃんと記録しておく。https://t.co/nXQ8XL5weP#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/MtHmxzJCnZ

— じゅに💻脱サラに命かける人 (@Jyu210) January 22, 2020

フローティングアイテムとは

30DAYSトライアル DAY23で実装するもう一つの機能、フローティングアイテムについて説明します。

上記で貼り付けたTwiterの動画で一番最初は右下のトップへ戻るボタンは表示されていおらず、少し下にスクロールしたら表示されるのが分かると思います。

このように何かのアクションによって非表示であった要素を「フワッと」表示させるものを「フローティングアイテム」と呼びます。

スムーススクロールの仕様

30DAYSトライアル DAY23の課題ページにスムーススクロールを実装する箇所のみ記載sされているので、僕が実装した際の仕様を書きします。

スムーススクロールの実装

スムーススクロールの実装は各リンクのクリックイベントにanimateメソッドを使用してい実装します。

下記は僕の実際のjQueryのコードになります。

1. スムーススクロールを実装するリンクには「to-link」クラスを付与する
2. 「to-link」のクリックイベントの中でクリックされた要素のリンク先を取得
3. offsetメソッドを使用して取得したリンク先のページトップからの位置を取得
4. animateメソッドを使用して取得した位置(タイトルが見えるように微調整して)、500ミリ秒でスクロールさせる

という感じです。

フローティングアイテムの仕様

フローティングアイテムを実装する際の仕様は以下の通りです。

フローティングアイテムの実装

フローティングアイテムの実装は30DAYSトライアル2nd DAY23の課題記事で紹介されているスクロールの途中で出現するフローティングボタンのJavaScriptを参考にさせて頂きました。

僕が書いているコードは上記のコードとクラス名が違うぐらいなので、あえてのせません。

ポイントとしては、スクロールのイベントをとるための

jQuery(window).on(“scroll”, function($) {

の部分でしょうかね。

windowがスクロールされた時にこの関数の処理をするというイメージ。

あとは参考コードでjQueryと記述されている箇所は「$」に置き換えてもうまく動作します。

「jQuery」って書くのと「$」って書く違いは色々調べましたが、はっきりとは分かってません。すいません・・・。

感想・まとめ

ライブラリは使わないものの、そこまで難しくなく実装できると思います。

jQuery自体がライブラリだよって言われるかもしれませんけど・・・。

今回学習した内容は最近のサイトでは必須だと思うので、しっかりとマスターしておきたいですね。

この勢いでDAY24も乗り超えていきます。