1. TOP
  2. ENGINEER
  3. ワンクリックでページ内を瞬間移動!! LPに便利なスムーススクロールの実装方法を解説【初心者向け】
FREENANCE Ad

ワンクリックでページ内を瞬間移動!! LPに便利なスムーススクロールの実装方法を解説【初心者向け】

スムーススクロールの導入方法を解説
FREENANCE Ad
ENGINEER
黒川シュン

ひとつの商品・サービスを売るために用意するLP（ランディングページ）は、多くのばあい縦に長いWebページとして制作されます。1ページ内に盛り込める情報も多く、読者の心理を突くための工夫をこれでもかと詰め込んでいます。

しかしLPはページ内の情報量が多く読み疲れるため、ユーザーが必要な情報に辿り着く前にページそのものを閉じられてしまうことも少なくありません。

そこで今回は、必要な情報だけでも最低限読んでもらえるよう、クリックひとつでページ内の所定位置まで滑らかに移動できる「スムーススクロール」の実装方法について解説します。

1ページでコンテンツが完結するペライチのLPを作っている方や、サイトのUXを改善したい方はぜひお試しください。

ページ内を瞬時に移動できる「スムーススクロール」とは？

スムーススクロールとは

通常、文章は頭から順番に読んでいくものです。しかしWebは手軽に複数の情報へアクセスできるため、読者がすべての情報に目を配ることはほぼありません。そのため、時には読者に読んでほしい「必要な情報」すら見落とされてしまうことも……。

そこで活躍するのが、今回ご紹介するスムーススクロール。スムーススクロールは、テキストやメニューバー、ボタンアイコンなどにアニメーションを紐づけ、それをクリックすることでページ内を所定の場所まで滑らかに自動スクロールする機能です。読者がサイトを快適に見回れるように導入されるもので、おもに目次リンクやページ下の「TOPへ戻る」ボタンなどで利用されます。

動き方もシンプルで、「A（フック）をクリック」したら「Bの地点（指定した飛び先）までスクロールする」という設定をするだけです。

jQueryを使って簡単に導入できる！スムーススクロールの開発・実装方法

ではさっそく、jQueryを使ってスムーススクロールを実装してみましょう。

スムーススクロールで「ページトップへ戻るボタン」を実装してみる

今回は「ページトップへ戻る」ボタンを作ってみたいと思います。

使うファイルは、HTMLとJavaScriptに記載する2つ。作成手順は以下のとおり。

  1. HTMLファイルを作り、スムーススクロールの機能を引っ掛けたいナビバーと、スムーススクロールを駆動させるフック（classタグ）を用意する
  2. 1で引っ掛けたフックに対して、「フックをクリックしたら○○のところ（今回はページトップ）までスクロールする」という命令を記述

実装手順

まずHTMLファイルには、jQueryの読み込みとJavaScriptファイルの動作を駆動させるのに必要なフックを挿入します。

（※ 今回はクリックしたことが分かりやすいようアイコンフォントでボタンを型取り、そこにフックを仕掛けます）

✅index.html

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<title>スムーススクロール</title>
　<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
　<a href="#" class="back-to-top"><i class="fas fa-chevron-up"></i></a>
　https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
　http://js/smooth-scroll.js
</body>
</html>

つづいてJavaScriptファイルには「フック（ここでは「.back-to-top」）をクリックしたら、ページのトップへスクロールして戻る」という命令を記述します。

✅smooth-scroll.js

jQuery(document).ready(function($) {

	$('.back-to-top').click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, "swing");
		return false;
	});
});

これで完成です。

スムーススクロール

お好みでCSSファイルを使ってボタンを装飾し、実装するとこのとおり。

フックを引っ掛けたナビバーをクリックすることで、きちんとトップへ戻りましたね。

プラグインを使わずにサイト内の目次を作ってみる

他にもスムーススクロールの技術を応用して、記事ページ内へ独自の目次を作ることも可能です。

作り方は以下のとおり。

  1. 記事ページのリード文直下に、記事内の見出しをまとめた目次欄をHTMLで記述する
  2. 記事内の見出しにそれぞれスムーススクロールを駆動させるフック（classタグ）を入れる
  3. 1で作った目次欄のタイトルに「フックをクリックしたら○○のところ（ここでは2のフックを割り振った箇所）までスクロールする」という命令を記述

実装手順

HTMLファイルには、

  • 「章タイトルをまとめた目次」と「飛び先の章タイトル」
  • 「jQueryの読み込み」と「JavaScriptファイルの動作を駆動させるのに必要なフック」

をそれぞれ挿入します。

✅index.html

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8">
　<title>目次</title>
　<link rel="stylesheet" href="css/style.css">
</head>
<body>
　<ul>
　　<li class="mokuji one">お仕事概要</li>
　　<li class="mokuji two">参照元</li>
　　<li class="mokuji three">ライター募集情報を配信中!</li>
　</ul>
　<h3 class="one_one">お仕事概要</h3>
　これはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストです
　<h3 class="two_two">参照元</h3>
　これはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストです
　<h3 class="three_three">ライター募集情報を配信中!</h3>
　これはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストです
　https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
　http://js/smooth-scroll.js
</body>
</html>

CSSファイルには、

  • liタグの文字列の上にカーソルを乗せたことが分かる「cursor:pointer;」
  • liタグを作った時に自動で挿入される”・”を消す「list-style:none;」

をそれぞれ記述します。

✅style.css


@charset "UTF-8";

li.mokuji {
　cursor:pointer;
　list-style:none;
}

JavaScriptファイルには、目次欄でまとめた章タイトルから、各章に割り振られた<h2>タグまでスクロールするよう命令します。

✅smooth-scroll.js

jQuery(document).ready(function($) {

	$('.one').click(function () {
		var p = $(".one_one").eq(0).offset().top;
		$('body,html').animate({
			scrollTop: p
		}, "swing");
		return false;
	});

	$('.two').click(function () {
		var p = $(".two_two").eq(0).offset().top;
		$('body,html').animate({
			scrollTop: p
		}, "swing");
		return false;
	});

	$('.three').click(function () {
		var p = $(".three_three").eq(0).offset().top;
		$('body,html').animate({
			scrollTop: p
		}, "swing");
		return false;
	});
});

これで完成です。
目次

実際に見てみると、このようになります。

目次をクリックすることで、記事内にある各章の見出しへ瞬時にスクロールできましたね。

おわりに

今回は、クリックひとつでページ内を瞬時に移動できるスムーススクロールの使い方を解説しました。

指定箇所まで一気にスクロールできる機能は、長文コンテンツを取り扱ったメディアやLPの作成などあらゆる場面で活躍します。

開発・実装まで簡単に行えるので、まだ使ったことがない方は今回の記事を参考にぜひ自サイトで実装してみてください。

 

こちらもおすすめ！▼

人気のフリーランス・副業求人
IoTの開発プロジェクト！ヘルスケア・医療データの処理、分析、解析、データマイニングを得意とするインフラエンジニア募集！
  • #スタートアップ
職種：バックエンドエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
【リモート可】音楽、エンタメ × ITでイノベーションを！API開発をするサーバーサイドエンジニア募集！
  • #土日週末OK
  • #急募
職種：バックエンドエンジニア
時給：4,000円 〜
働き方：どちらでも可
エリア：東京都
もっと案件を探す

■当サイト掲載中の情報について
Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。
■アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール『Googleアナリティクス』を利用しています。このGoogleアナリティクスはトラフィックデータの収集を行なっています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この規約に関して、詳しくはGoogle アナリティクス利用規約をご覧ください。
■広告の配信について
当サイトは第三者配信の広告サービス『Google Adsense』を利用しています。広告配信事業者は、取得した閲覧履歴や購買履歴等の情報を分析して、ユーザーの趣味・嗜好に応じた新商品・サービスに関する広告を表示することがあります。また当サイトは、商品やサービスを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、『A8.net』『もしもアフィリエイト』『afb』『アクセストレード』『バリューコマース』『レントラックス』『felmat』『TGアフィリエイト』『リンクシェア』『楽天アフィリエイト』『Amazon アソシエイト』の参加者です。IPアドレス、ユーザーエージェント、クッキー情報、成果結果情報（広告成果毎の識別子）などを取得し、広告配信に係る成果計測、広告配信に係る不正防止などに利用する場合があります。
ADHD会社員、フリーランスになる。

デザインの言語化

フリーランスの進路相談室

NEW

SHARE

PICKUP

MORE ARTICLES
  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE

KEYWORDS

エンジニア副業案件
Workship