今日はページ内リンクで特定の場所までスムーススクロールさせる方法について解説します。
当サイトも利用してますが、「ページトップ」や「記事の目次」などでよく利用するすることになりますね。
基本的なスクリプト
これが基本的なJavaScriptです。2行目の$('a[href^="#"]').click(function()に注目してください。
これは「先頭に#のついたaタグがクリックされたら…」という命令になります。
$(function(){
$('a[href^="#"]').click(function(){
//スクロールのスピード
var speed = 500;
//リンク元を取得
var href= $(this).attr("href");
//リンク先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
//リンク先までの距離を取得
var position = target.offset().top;
//スムーススクロール
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
htmlは以下のような感じで先頭に#をつけてdivタグの名前を設定すれば、いいだけです。
<div id="header">ヘッダー</div>
略
<div id="footer">
<a href="#header">トップに戻る</a>
</div>
もちろんブラウザの一番上に戻る時だけ使うだけじゃありません。
目次などで、ページ内の途中にスクロールさせる場合でも、使用することができます。
<div id="mokuji">
<ul>
<li><a href="#contents1">コンテンツ1</a></li>
<li><a href="#contents2">コンテンツ2</a></li>
<li><a href="#contents3">コンテンツ3</a></li>
</ul>
</div>
<div id="contents1">
コンテンツ1の内容
</div>
<div id="contents2">
コンテンツ1の内容
</div>
<div id="contents3">
コンテンツ1の内容
</div>
ヘッダーが固定の場合
当サイトもそうですが、ヘッダーが固定して表示される場合は上記の方法だと、先頭の部分がヘッダーと重なって隠れてしまいます。
ということは、ヘッダーの高さを引いて距離を取得する必要があります。
$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
//ヘッダーの高さを取得
var header = $('header').height();
//ヘッダーの高さを引く
var position = target.offset().top - header;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
9行目でpositionに目標を代入する際にtarget.offset().top – headerでヘッダーの高さを引いてから代入しています。
まとめ
ページ内をアンカーリンクで移動させる場合、パっと移動させるよりもスムーズにスクロールさせて移動する方が、ユーザビリティの観点からも親切だと思います。
導入していない方は、是非この機会に検討してください!
それではまた!仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで!もちろん宮城県外の方も大歓迎です!
関連記事
-
WordPressでデバイス(モバイル・PC)ごとに表示を変える方法!
-
【WordPress】ショートコード作成の基本中の基本を解説!一番簡単なショートコードを作ります。
-
WordPressで最終更新日を表示する方法!SEOにも効果あり!
-
WordPressのwp_footer()を初心者向けに解説!
-
フォームでtextareaのリサイズ機能を制限する方法
-
WordPressで固定ページかどうか判定するには「is_page()」を使います!
-
WordPressの.htaccessが勝手に書き換えられてしまう場合はココをチェック!
-
CakePHP(3.9.3)でデータベースの接続でapp.phpを更新したのにうまくいかない!?