#034
posted on 2021.04.22

(jQuery版) ページ内リンクをクリックでスクロール移動。

jQueryを使って、アンカーリンクでページ内の任意の位置にスクロール移動させる方法。

 

 

HTMLのマークアップ

移動したい位置にあるHTML要素に任意のid属性を付ける。

ナビゲーションメニューなどでa要素のhref属性に、移動先のHTML要素のidと同じ文字列を「#」を付けてフラグメント識別子として指定。

<header>
	<nav>
		<a href="#test01">リンク01</a>
		<a href="#test02">リンク02</a>
	</nav>
</header>

<div id="test01">
	<p>ターゲット01</p>
</div>
<div id="test02">
	<p>ターゲット02</p>
</div>

 

 

jQueryで実装

a要素をクリックして、href属性の値が「#」から始まる文字列だった場合のみ、指定のidを持つ要素までスクロール移動させる。

  1. a要素のhref属性値を取得。
  2. 取得したhref属性値と同じid属性値を持つHTML要素のY座標トップを取得。
  3. animate()メソッドでスクロール移動。
  4. ヘッダーが上部に固定されているデザインの場合はスクロール位置を補正。

 

関数を作成してクリックイベントで実行
  • 1回のスクロールアニメーションが完了するまで連続発火させない場合はnot(‘:animated’)メソッド、スクロールアニメーション中でも連続発火させて途中で次の位置へのスクロールに移行させる場合はstop()メソッドを使う。
  • ブラウザによってscrollTopが動作している要素が違うので、「’html, body’」の両方を指定してanimate()メソッドを実行する。厳密にどちらかの要素だけで実行させる場合は、ユーザーエージェントを調べてそれぞれに「’html’」か「’body’」を振り分ける。(ブラウザの仕様が変わる可能性があるので両方指定しておくのが無難。)
  • hrefの属性値に「#」の部分(フラグメント識別子)だけでなくフルパスが指定されている場合は、jQueryのattr()メソッドではなくネイティブJavaScriptでprototypeオブジェクトから継承しているプロパティーのhashで参照する。
//初期値設定
let href,
	duration = 1000, //スクロールアニメーションさせる時間(ミリ秒)
	easing = 'swing'; //アニメーションイージング

//関数作成
const anchorLink = function(t){
	//クリックしたa要素のhrefの値を取得
	href = $(t).attr('href');
	//hrefの値が「#」一文字だった場合はfalseを返して終了
	if(href == '#') return false;

	//移動先のHTML要素のY座標トップを取得
	let targetTop = $(href).offset().top;
	//animateメソッドでスクロール移動を実行
	$('html, body').stop().animate({scrollTop: targetTop}, duration, easing);
}

//クリックイベントで関数実行
//a要素のhref属性が#で始まる場合のみ実行する
$(document).on('click', 'a[href^="#"]', function(){
	ag2anchorLink(this); //自身を渡して関数実行
	return false; //アンカーの通常の機能を無効化
});

要素.attr(‘属性名’, ‘値’) : 指定した属性名で指定した値を要素に設定する。第2引数には配列や関数の指定もできる。第2引数が無い場合は、指定した属性名の値を取得して返す。

要素.offset() : documentの左上を基準点として要素の位置情報を取得する。プロパティーに「top」と「left」を含むオブジェクトを返す。引数にプロパティーと数値を指定して要素に位置座標を設定することもできる。

要素.stop(‘キューのクリア’, ‘現アニメーションの対応動作’) : 現在実行中のアニメーションを中止する。第1引数(初期値:false)がtrueなら待機中のキューを削除する。第2引数(初期値:false)がfalseの場合は現在のアニメーションは途中の状態で終了、trueの場合は即座にアニメーションの最後の状態に移動。

要素.animate(‘CSSのキーと値のマップ値’, ‘アニメーションする時間’, ‘イージング’, ‘コールバック関数’) : 第1引数に指定したCSSの状態にアニメーション変化する。数値が設定できないCSSのプロパティーは指定できない。イージングは「swing」と「linear」のみ。

[属性名^=”文字列”] : 指定した属性の値が指定した文字列から始まる要素を取得するCSSの属性セレクター。

 

※ jQueryのeasingプラグインを導入すれば、使用できるイージングの種類を追加できる。

 

 

header部分がfixedで固定デザインの場合に位置の補正

header要素を「position: fixed; top: 0;」で固定にしているデザインの場合は、そのままだと移動先がヘッダーの下に隠れるので、ヘッダーの高さ分だけスクロール位置を補正させる。

let href,
	duration = 1000,
	easing = 'swing';
const ag2anchorLink = function(t){
	href = $(t).attr('href');
	if(href == '#') return false;

	let targetTop = $(href).offset().top - $('header').innerHeight();

	$('html, body').stop().animate({scrollTop: targetTop}, duration, easing);
	return true;
};
$(document).on('click', 'a[href^="#"]', function(){
	ag2anchorLink(this);
	return false;
});

 

 

この記事をシェア

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)