【jQuery】ページ内をスクロールするスムーススクロールの使い方を解説

こんにちは

久しぶりに会う友達にはもれなく「太ったな~」と言われるだーだいです。

今回はWeb制作の仕事でもよく使用する、ページ内スクロールの使い方について解説します。

「jQueryでページ内スクロール機能を使用したいんだけど、どうやるんだろう?」

このような悩みを持っている方がわかりやすいように、参考コードを使用して説明します。

また、ページ内スクロールを使用した「トップへ戻る」ボタンの実装方法も説明しています。

【jQuery】ページ内スクロールはスムーススクロールともいう

Webサイトを使用していると、「トップへ戻る」を押すと最初の画面にスクロールされるボタンを見たことがありませんか?

このように、ページ内をスクロールする機能をスムーススクロールといいます。

スムーススクロールを実装することで、ユーザーが効率よく希望の情報を見つけられます。

Webサイトの目次にある見出しをクリックすると、その見出し記事に移動する機能もスムーススクロールで実装されており、知りたい情報だけ得られます。

ユーザーが求めている情報を速く提供できるスムーススクロールは、Web制作でも頻繁に使用する技術です。

jQueryでページ内リンクをスクロールする方法【参考コード付き】

目次のタイトルをクリックすると、ページ内にあるその記事にスクロールする方法を参考コードを用いて解説します。

コピぺして実際に使用できます。

【参考コード】html/css

aタグをクリックすると、href属性に指定されている数値と、同じ数値が指定されているid属性に移動します。

このことをアンカーリンクといいます。

アンカーリンクを指定するだけでも指定した記事へ移動できるのですが、jQueryを追加するとページ内をスクロールしながら移動できます。

【参考コード】jQuery

3行目は、href属性の値に#が含まれているaタグがクリックされた場合に処理するコードです。

4行目の「this」はクリックしたaタグが指定されており、attr()関数でhref属性の値を取得して、変数hrefへ代入しています。

5行目は、idのある要素の有無をif文で確認してtarget変数へ代入しています。

10行目では、offset関数でtarget変数から移動先を取得しています。取得した値をdistance変数へ代入します。

11行目のanimate関数でスクロールを開始。数字の400は0.4秒でスクロールするという意味です。

【jQuery】スムーススクロールでトップへ戻るボタンを実装

Webサイトでよく使用されている「トップへ戻る」ボタンの実装方法を、参考コードを交えて解説します。

【参考コード】html/css

#page_topは、position:fixed;で一定位置に固定しており、bottomとrightで固定する画面の場所を指定しています。

【参考コード】jQuery

top.hide()で「トップへ戻る」ボタンを非表示にしており、4行目は、画面をスクロールしたら実行する関数です。

5行目のif文は、100pxスクロールしたら「トップへ戻る」ボタンをfadein関数で表示させるが、100pxに満たない場合はfadeOut関数で非表示にしています。

「トップへ戻る」ボタンをクリックしたときに行う処理を、top.click()で行っており、0.5秒で一番上の画面へ戻る処理をしています。

jQueryでスムーススクロールが効かないときに確認すべきこと

スムーススクロールを実装してもうまく動かない場合は、下記の点ができているのか確認しましょう。

  • jQueryを読み込んでいる位置をチェック
  • WordPressで使用する場合は、「$」マークを「jQuery」へ変更する
  • jQueryを複数指定していないかチェック

jQueryコードの前に読み込まないと動作しないのでチェックしましょう。また、jQueryを複数読み込んでいる場合もうまく動かないことがあります。

WordPressで元々使用されているjQueryは「$」で書かれているので、コードが被ってしまう可能性があります。WordPressで使用するときは「jQuery」と記述して使用しましょう。

まとめ

いかがでしたか?

今回はjQueryでページ内のスクロール機能を実装する方法について解説しました。

スムーススクロールはWeb制作でよく使用されるので、本記事をきっかけに作り方を身につけておきましょう。

ぜひ参考にしてみてくださいね。

 

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?