takato（@n8takato）です！
スムーズスクロールをjQueryで実装したい
この記事は上記の課題に向けて作成しています。
スムーズスクロールはweb制作で頻繁に使用されます。
jQuerを使用することで簡単に実装することが出来ます。
この記事ではjQueryでスムーズスクロールを実装する方法を説明します。
この記事を読むメリット
- jQueryでスムーズスクロールを実装する方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナーとして勤務
- webデザイナー歴2年目のひよっこ
- web制作現場で学んだことを発信している人
JavaScriptに関する他の記事はこちら
スムーズスクロールをjQueryで実装する方法
早速スムーズスクロールをjQueryで実装する方法を説明します。
実装する手順は下記の通りです。
スムーズスクロールを実装する手順
- アンカーリンクの作成
- jQueryの導入
- スムーズスクロールの設定
それぞれ説明します。
アンカーリンクの作成
始めにアンカーリンクを作成します。
アンカーリンクとは？
- ページ内のリンク先に移動する機能のことです。スムーズスクロールの土台となります。
アンカーリンクはHTMLだけで作成することが出来ます。
①リンク先にidを追加する
まず下記のようにリンク先の部分にidを追加します。
<div class="wrapper" id="scroll">
<p>ここはリンク先部分になります。リンク元をクリックすることでここが表示されます。</p>
</div>クラス名・id名・文章は任意となります。
②リンク元にidを反映させる
続いてリンク元に先ほど作成したidを反映させます。
<a href="#scroll">ここをクリックすると先程の部分が表示される</a>リンク元部分にidを記入する場合は頭に「#」を記述します。
アンカーリンクの作成は以上です。
リンク元をクリックするとリンク先に瞬時に移動すると思います。
jQueryの導入
次はjQueryを導入します。
jQueryの導入は下記コードを使用します。
jQuery導入に必要なコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>上記コードはHTMLのheadタグ内に記入します。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>上記のように記述出来たらjQueryの導入は完成です。
スムーズスクロールの設定
最後にスムーズスクロールの設定を行います。
JavaScriptのコードを記述することで設定できます。
下記コードを使用します。コピペして頂いて大丈夫です。
<script>
$(function(){
$('a[href^="#"]').click(function() {
let speed = 500;
let href= $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>上記コードはHTMLのbodyタグ直前に記述します。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$('a[href^="#"]').click(function() {
let speed = 500;
let href= $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
</body>以上でスムーズスクロールの設定は終わりです。
ページ内遷移がスムーズに行われるか確認してみてください。
スクロール時間の長さの変更
スクロール時間の長さを変更することが出来ます。
変更する箇所は下記コード部分です。
let speed = 500;「let speed」とはトリガーをクリックしてからスクロールが完了されるまでにかかる時間のことです。
500だとスクロールが完了するまでに0.5秒かかるという設定です。
数値を変更することでスクロール完了までの時間を調整出来ます。
多くのwebサイトは0.4秒か0.5秒で設定されています。そのため400か500で良いかと思います。
スムーズスクロールの設定で気をつけること
スムーズスクロールの設定で気を付けることが1つあります。
スムーズスクロールの設定で気を付けること
- ハンバーガーメニューが閉じないという現象
ハンバーガーメニューが閉じなくなる
スムーズスクロールのトリガーがハンバーガーメニュー上にある場合、ハンバーガーメニューが閉じない現象が起こります。
他のページに遷移することでこの現象は解消されますが、そうしない限りハンバーガーメニューが表示されたままになりす。
この現象を回避するにはトリガーをクリックした際にハンバーガーメニューが自動で閉じる設定をする必要があります。
下記コードを先ほど記述したコードに追加することで設定出来ます。
$('トリガーとなるクラス名').on('click', function(){
if (window.innerWidth <= 768) {
$('ハンバーガーメニューのクラス名').click();
}
});「ハンバーガーメニューのクラス名」部分に指定したクラス名を記述してください。
上記コードでハンバーガーメニューが自動で閉じるようになります。
スムーズスクロールは簡単に実装出来る
最後にまとめです。
- スムーズスクロールはjQueryの導入で簡単に実装出来る
- ハンバーガーメニューを使用する際は注意が必要
スムーズスクロールはページ内遷移がある場合はほぼ必須です。
実装したことの無い方は出来るようにしておいてください。
