takato（@n8takato）です！
ページ内リンクを滑らかに移動したい
この記事では上記の課題を解決します。
webサイトの制作をしていると、スムーズスクロールという機能を設定することがあります。
スムーズスクロールとは、メニューなどをクリックするとページ内にあるリンク先までスムーズに移動する機能のことです。
LPによく見かける機能で、お問い合わせボタンを押すとサイト下部の問い合わせフォームまでスーっとスクロールされる動きのことです。
web制作の現場でもスムーズスクロールを使用する機会はよくあります。そのためwebデザイナーやフロントエンジニアを目指す方は必須のスキルとなります。
難しそうに思うかもしれませんが、実は非常に簡単です。
今回は初心者でもできるスムーズスクロールの設定方法を皆さんに紹介したいと思います。
・スムーズスクロールの作成の流れ
・スムーズスクロールに必要なコード
・スクロール時間の長さの変更方法
・スムーズスクロールの注意点
他にもjQueryに関する内容の記事を作成しています。詳しくは「画像をクリックして拡大させる方法を紹介！コピペ可能なコードあり！」を読んでください。
スムーズスクロールの設定方法
まずはスムーズスクロールの設定の流れを説明します。設定の流れは3つの流れになります。
・アンカーリンクの作成
・jQueryの導入
・スムーズスクロールの設定
では、上記の流れにそって設定方法を紹介したいと思います。
アンカーリンクの作成
初めにアンカーリンクを作成します。アンカーリンクは、ページ内のリンク先に瞬時に移動する機能で、スムーズスクロールのベースとなるものです。
アンカーリンクはHTMLだけで作成することが出来ます。まず、下記のようにリンク先の部分にidを追加します。
<div class="wrapper" id="scroll">
<p>ここが表示される</p>
</div>クラス名・id名・文章は各自好きな内容で構いません。
次にトリガーとなるコードを記入します。
<a href="#scroll">ここをクリックすると先程の部分が表示される</a>リンク先はid名を入力します。各自記入したid名をここにも記入してください。また、リンク先をid名にする際は、頭に「#」を入力することを忘れないでください。
これでアンカーリンクの設定は終わりです。リンクをクリックするとリンク先が表示されるかと思います。
jQueryの導入
次にスムーズスクロールを導入してリンク先に移動する動きを気持ちよくします。
jQueryのコードを<head></head>内に入れることで、スムーズスクロールの導入を行うことが出来ます。
下記コードをHTMLファイルの<head></head>内に入れてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>入力できたらjQueryの導入は終わりです。
スムーズスクロールの設定
最後にスムーズスクロールの設定を行います。設定を行うにはJavaScriptのコードを入力する必要があります。
下記コードがJavaScriptのコードなので、コピペしてください。
場所はHTMLファイル下部の</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>HTMLに上記のコードを入力できたら、スムーズスクロールの完成です。非常に簡単ですよね！
スクロール時間の長さの変更
実はスムーズスクロールは、スクロール時間の長さを調節することが出来ます。これも簡単に設定することが出来ます。
最後に追加したJavaScriptのコードの、下記の部分を編集します。
let speed = 500;「let speed」とは、トリガーをクリックしてからスクロール完了されるまでにかかる時間の設定のことです。
今500と記入されていますが、これはスクロール完了までに0.5秒かかるという設定です。
このコードの数値を増やすと、スクロール完了までの時間が長くなります。多くのwebサイトは0.4秒か0.5秒で設定されているので、400か500で良いかと思います。
スムーズスクロールの設定で気をつけること
実際にスムーズスクロールを設定したことのある方はわかるかもしれませんが、ハンバーガーメニューでスムーズスクロールの設定を行なった場合は注意点があります。
ハンバーガーメニューとは、ハンバーガーボタンを押すとサイトに重なった状態でメニューが表示されます。主にレスポンシブデザインで用いられる手法です。
ハンバーガーメニューでスムーズスクロールのページ内リンクを設定するとスクロールはされるのですが、ハンバーガーメニューが閉じないという現象が起こります。
他のメニューにページ遷移するのであれば問題ないのですが、ページ内リンクだとメニューが閉じずに表示されたままになるのです。
この現象を解決するには、メニュー内リンクをクリックした際にハンバーガーメニューが非表示になる設定を行う必要があります。
上記の設定は簡単にできるのでご安心ください。
ハンバーガーメニューのJavaScriptコードに下記のコードを追加することで、上記の設定を行うことが出来ます。
$('トリガーとなるクラス名').on('click', function(){
if (window.innerWidth <= 768) {
$('ハンバーガーメニューのクラス名').click();
}
});
あくまでハンバーガーメニュー設定時にハンバーガーメニューのjQueryに追加するコードですので、ただのスムーズスクロールには不要です。
今コードを覚える必要はありません。上記の現象が起こるということを頭に入れておいて、必要な時にこの記事を読み返せば大丈夫です。
最後に
この記事ではスムーズスクロールでページ内リンクを滑らかに移動する方法を紹介しました。
アニメーションはサイトをかっこよくしてくれます。
様々なアニメーションを駆使してサイトを作りましょう。
