JavaScript プログラミング

【jQuery初心者】ページ内リンクでスムーススクロールを実装する方法

2020年11月17日

 

こんにちは、イケゾーです。

イケゾー
今回は、jQueryをスムーススクロールの実装方法を紹介するよ

 

ページ内をスムーズに移動する「スムーススクロール」ですが、ほとんどのサイトで採用されております。ナビゲーションから各セクションへの移動や、常に「TOPへ戻る」ボタンが表示されていたり、様々な場面で使われています。ユーザを上手にページ内を誘導できるので、設置しておいた方が良いですね。

HTML/CSSだけを触っただけの方にとって、jQueryのこういった動きのあるモノってハードル高く感じます。僕もそうでした。しかし、仕組みを理解してから取り組んでみると、意外と大したことはありません。なので当記事では、コードを掲載するだけでなく文章で噛み砕き、超初心者向けに丁寧に解説していきます。

コードはそのまま仕事に応用できる財産になりますので、ぜひ手を動かしてPC上で動かしてみてください。

この記事はこんな人におすすめ!

  • jQuery初心者(どうやって使うの?なにができるの?)
  • jQueryってなんだか難しそうって思っている
  • jQueryでスムーススクロールの実装をしたい
  • jQueryの「scroll」の使い方を知りたい

 

スライドショーにも挑戦しよう
【jQuery初心者】簡単なスライドの作り方|アニメーションサンプル有り

続きを見る

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

 

【jQuery初心者】ページ内リンクでスムーススクロールを実装する方法

「indexボタン」と「矢印ボタン」の2つを実装していき、その後コードの重複をきれいに仕上げていく流れになります。

 

完成物の確認

 

記事のトップに動画で載せましたが、実装していく内容はこちらです。

  • メニューバー
    「1〜5」のボタンをクリックすると、対応したタイトル「1〜5」にスクロールします。
  • 戻るボタン
    各章に配置して、クリックするとページトップにスクロールします。

 

注意点ですが、基本的なHTML,CSSは出来ていて、jQueryが使える状態であることを前提に進めいてきます。不安な方はこちらの記事で確認してから始めましょう。

HTML/CSSの基本
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

 

 

HTMLとCSSの準備

jQuery導入に必須です。こちらで最新版を確認してください。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

 

ここでつまずく方がいますので、心配な方はチェックしてください!

 

HTML

<h2 id="top">jQueryのページ内スムーススクロール</h1>
<nav>
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ul>
</nav>
<div class="area" id="1">
  <div class="title">1</div>
  <a href="#top" class="btn">▲ メニューへ戻る</a>
</div>
<div class="area" id="2">
  <div class="title">2</div>
  <a href="#top" class="btn">▲ メニューへ戻る</a>
</div>
<div class="area" id="3">
  <div class="title">3</div>
  <a href="#top" class="btn">▲ メニューへ戻る</a>
</div>
<div class="area" id="4">
  <div class="title">4</div>
  <a href="#top" class="btn">▲ メニューへ戻る</a>
</div>
<div class="area" id="5">
  <div class="title">5</div>
  <a href="#top" class="btn">▲ メニューへ戻る</a>
</div>

 

CSS

 nav ul{
	display: flex;
	justify-content: space-between;
	margin: 0 0 100px;
	box-sizing: border-box;
}
nav ul li{
	width: calc(100% / 5);
	border-right: 1px solid #fff;
	text-align: center;
	box-sizing: border-box;
}
nav ul li:last-child{
	border-right: none;
}
nav ul li a{
	text-decoration: none;
	display: block;
	color: #fff;
	background: #222;
	transition-duration: .3s;
}
nav ul li a:hover{
	opacity: 0.7;
}
.area{
	margin-bottom: 200px;
}
.area .title{
	color: #fff;
	background: #222;
	text-align: center;
	padding: 10px;
}
.btn{
	display: block;
	color: #fff;
	background: #aaa;
	width: 50%;
	margin: 20px auto;
}

 

 

jQueryの解説

では、jQueryを書いていきましょう。

 

まずは、大切な仕組みの理解をしましょう。

  1. <a>hrefの値を取得して、そのidを持つ飛び先を探します。
  2. 飛び先の位置座標(px)をoffsetで取得します。
  3. アニメーション関数を使ってscrollさせます。

(おまけ) adjustは、飛び先の調整をするモノなので、使わなくてもOK
(おまけ)変数に格納して、コードをきれいにしています。使わなくてもOK

 

コードを文章にて解説していますので、文章を読みながらコードを見てください。
何回か見ていると、コードが読めるようになってきます。

 

jQuery

$(function(){
	$('a').click(function(){
		// 移動先の調整をする。20と書けば20px下にずれる。
		var adjust = 0;

		// スクロールの速度(ミリ秒)
		var speed = 400;

		// 飛び先のhrefを取得して、変数hrefに格納する
		var href = $(this).attr("href");

		// 飛び先(hrefと同じidを持つ要素)を探して、targetに格納する
		var target = $(href == "#" || href == "" ? 'html' : href);

		// 飛び先の位置座標をoffset()で取得して、positionに格納する
		var position = target.offset().top + adjust;

		// スクロールにアニメーションをつける linear(等速) or swing(変速)
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

 

 

まとめ

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-JavaScript, プログラミング
-, , , ,

© 2021 IkezoooBlog