こんにちは
久しぶりに会う友達にはもれなく「太ったな～」と言われるだーだいです。
今回はWeb制作の仕事でもよく使用する、ページ内スクロールの使い方について解説します。
「jQueryでページ内スクロール機能を使用したいんだけど、どうやるんだろう？」
このような悩みを持っている方がわかりやすいように、参考コードを使用して説明します。
また、ページ内スクロールを使用した「トップへ戻る」ボタンの実装方法も説明しています。
目次
【jQuery】ページ内スクロールはスムーススクロールともいう
Webサイトを使用していると、「トップへ戻る」を押すと最初の画面にスクロールされるボタンを見たことがありませんか？
このように、ページ内をスクロールする機能をスムーススクロールといいます。
スムーススクロールを実装することで、ユーザーが効率よく希望の情報を見つけられます。
Webサイトの目次にある見出しをクリックすると、その見出し記事に移動する機能もスムーススクロールで実装されており、知りたい情報だけ得られます。
ユーザーが求めている情報を速く提供できるスムーススクロールは、Web制作でも頻繁に使用する技術です。
jQueryでページ内リンクをスクロールする方法【参考コード付き】
目次のタイトルをクリックすると、ページ内にあるその記事にスクロールする方法を参考コードを用いて解説します。
コピぺして実際に使用できます。
【参考コード】html/css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<body> <style> div{ width:100%; height:500px; } ul li a{ font-size:15px; } </style> <h2 id="title">目次</h2> <ul> <li><a href="#sec1">タイトル1</a></li> <li><a href="#sec2">タイトル2</a></li> <li><a href="#sec3">タイトル3</a></li> </ul> <div id="sec1"> <h2>タイトル1</h2> </div> <div id="sec2"> <h2>タイトル2</h2> </div> <div id="sec3"> <h2>タイトル3</h2> </div> |
aタグをクリックすると、href属性に指定されている数値と、同じ数値が指定されているid属性に移動します。
このことをアンカーリンクといいます。
アンカーリンクを指定するだけでも指定した記事へ移動できるのですが、jQueryを追加するとページ内をスクロールしながら移動できます。
【参考コード】jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function(){ $('a[href^=#]').click(function() { var href= $(this).attr("href"); if (href == "#" || href == ""){ var target = $('html'); }else{ var target = $(href); }; var distance = target.offset().top; $('html').animate({scrollTop:distance}, 400, 'swing'); return false; }); }); </script> |
3行目は、href属性の値に#が含まれているaタグがクリックされた場合に処理するコードです。
4行目の「this」はクリックしたaタグが指定されており、attr()関数でhref属性の値を取得して、変数hrefへ代入しています。
5行目は、idのある要素の有無をif文で確認してtarget変数へ代入しています。
10行目では、offset関数でtarget変数から移動先を取得しています。取得した値をdistance変数へ代入します。
11行目のanimate関数でスクロールを開始。数字の400は0.4秒でスクロールするという意味です。
【jQuery】スムーススクロールでトップへ戻るボタンを実装
Webサイトでよく使用されている「トップへ戻る」ボタンの実装方法を、参考コードを交えて解説します。
【参考コード】html/css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> #page_top { position: fixed; bottom: 30px; right: 20px; } #page_top a { background-color: #999; color: #fff; text-align: center; text-decoration: none; padding: 20px 20px; } .content{ height: 1000px; } </style> <div class="content"> <p>下へスクロール</p> </div> <div id="page_top"><a href="#">トップへ戻る</a></div> <script> |
#page_topは、position:fixed;で一定位置に固定しており、bottomとrightで固定する画面の場所を指定しています。
【参考コード】jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(function(){ var top = $('#page_top'); top.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { top.fadeIn(); } else { top.fadeOut(); } }); top.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> |
top.hide()で「トップへ戻る」ボタンを非表示にしており、4行目は、画面をスクロールしたら実行する関数です。
5行目のif文は、100pxスクロールしたら「トップへ戻る」ボタンをfadein関数で表示させるが、100pxに満たない場合はfadeOut関数で非表示にしています。
「トップへ戻る」ボタンをクリックしたときに行う処理を、top.click()で行っており、0.5秒で一番上の画面へ戻る処理をしています。
jQueryでスムーススクロールが効かないときに確認すべきこと
スムーススクロールを実装してもうまく動かない場合は、下記の点ができているのか確認しましょう。
- jQueryを読み込んでいる位置をチェック
- WordPressで使用する場合は、「$」マークを「jQuery」へ変更する
- jQueryを複数指定していないかチェック
jQueryコードの前に読み込まないと動作しないのでチェックしましょう。また、jQueryを複数読み込んでいる場合もうまく動かないことがあります。
WordPressで元々使用されているjQueryは「$」で書かれているので、コードが被ってしまう可能性があります。WordPressで使用するときは「jQuery」と記述して使用しましょう。
まとめ
いかがでしたか？
今回はjQueryでページ内のスクロール機能を実装する方法について解説しました。
スムーススクロールはWeb制作でよく使用されるので、本記事をきっかけに作り方を身につけておきましょう。
ぜひ参考にしてみてくださいね。
