30DAYSトライアル2nd

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

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

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

スムーススクロールとは

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

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

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

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

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

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




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

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

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

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




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

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

スムーススクロールの仕様
  • グローバルメニューの各リンク
  • メインビジュアルの「お問い合わせ」ボタン
  • 画面下部に固定している「トップページに戻る」ボタン
  • 各セクションんい移動したあとにセクションタイトルがきちんと表示されていること
  • スクロールの速度は500ミリ秒




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

スムーススクロールの実装は各リンクのクリックイベントに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も乗り超えていきます。

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す