【漫画】フリーランスが“やってはいけない”活動名
- フリーランス/個人事業主
- 漫画
- 連載
ひとつの商品・サービスを売るために用意するLP（ランディングページ）は、多くのばあい縦に長いWebページとして制作されます。1ページ内に盛り込める情報も多く、読者の心理を突くための工夫をこれでもかと詰め込んでいます。
しかしLPはページ内の情報量が多く読み疲れるため、ユーザーが必要な情報に辿り着く前にページそのものを閉じられてしまうことも少なくありません。
そこで今回は、必要な情報だけでも最低限読んでもらえるよう、クリックひとつでページ内の所定位置まで滑らかに移動できる「スムーススクロール」の実装方法について解説します。
1ページでコンテンツが完結するペライチのLPを作っている方や、サイトのUXを改善したい方はぜひお試しください。
ページ内を瞬時に移動できる「スムーススクロール」とは？
通常、文章は頭から順番に読んでいくものです。しかしWebは手軽に複数の情報へアクセスできるため、読者がすべての情報に目を配ることはほぼありません。そのため、時には読者に読んでほしい「必要な情報」すら見落とされてしまうことも……。
そこで活躍するのが、今回ご紹介するスムーススクロール。スムーススクロールは、テキストやメニューバー、ボタンアイコンなどにアニメーションを紐づけ、それをクリックすることでページ内を所定の場所まで滑らかに自動スクロールする機能です。読者がサイトを快適に見回れるように導入されるもので、おもに目次リンクやページ下の「TOPへ戻る」ボタンなどで利用されます。
動き方もシンプルで、「A（フック）をクリック」したら「Bの地点（指定した飛び先）までスクロールする」という設定をするだけです。
jQueryを使って簡単に導入できる！スムーススクロールの開発・実装方法
ではさっそく、jQueryを使ってスムーススクロールを実装してみましょう。
スムーススクロールで「ページトップへ戻るボタン」を実装してみる
今回は「ページトップへ戻る」ボタンを作ってみたいと思います。
使うファイルは、HTMLとJavaScriptに記載する2つ。作成手順は以下のとおり。
- HTMLファイルを作り、スムーススクロールの機能を引っ掛けたいナビバーと、スムーススクロールを駆動させるフック（classタグ）を用意する
- 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ファイルを使ってボタンを装飾し、実装するとこのとおり。
フックを引っ掛けたナビバーをクリックすることで、きちんとトップへ戻りましたね。
プラグインを使わずにサイト内の目次を作ってみる
他にもスムーススクロールの技術を応用して、記事ページ内へ独自の目次を作ることも可能です。
作り方は以下のとおり。
- 記事ページのリード文直下に、記事内の見出しをまとめた目次欄をHTMLで記述する
- 記事内の見出しにそれぞれスムーススクロールを駆動させるフック（classタグ）を入れる
- 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の作成などあらゆる場面で活躍します。
開発・実装まで簡単に行えるので、まだ使ったことがない方は今回の記事を参考にぜひ自サイトで実装してみてください。
こちらもおすすめ！▼
jQueryプラグイン78選。種類別一覧まとめ
Workship MAGAZINE
人気のフリーランス・副業求人
IoTの開発プロジェクト！子どもが楽しくハミガキできるゲームコンテンツを開発するUnityエンジニア募集！
- #スタートアップ
職種：iOS/Androidアプリエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
IoTの開発プロジェクト！ヘルスケア・医療データの処理、分析、解析、データマイニングを得意とするインフラエンジニア募集！
- #スタートアップ
職種：バックエンドエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
サイト運営が趣味なWeb制作系ライターとして活動中。最近はライター業と並行してサイト運営・時報の拡張機能の開発をやっています。
