JavaScript
jQuery
accessibility
アクセシビリティ

ページ遷移時のページ内リンクのスムーススクロール

よく出回ってるhoge.html?id=sec01など、URLのクエリパラメータでIDを指定するようなURLでページ内アンカーをさせるやり方はアクセシビリティ、マシンリーダブルの面では疑問です。

JavaScriptをOFFにされてもきちんと動作し、またGoogleなどのbotにも適切な箇所にリンク先を指定できるページ内アンカー(#id)で指定する方が好ましいと個人的に考えてます。

✕悪い例

<a href="hoge.html?id=sec01">

◎良い例

<a href="hoge.html#sec01">

なので素直にハッシュ(#)でID指定してページが自動スクロールするJavaScriptをjQueryで書きました。

Sample )

https://codepen.io/garyuten/pen/rwOGzJ?editors=1111

以下のURLにアクセスすると指定ページまでスクロールします。

https://s.codepen.io/boomerang/iFrameKey-cc3e6142-0f16-aee0-062d-a766a696bad8/index.html?editors=1111#page05


JavaScript

$(document).ready(function(){

//URLのハッシュ値を取得
var urlHash = location.hash;
//ハッシュ値があればページ内スクロール
if(urlHash) {
//スクロールを0に戻す
$('body,html').stop().scrollTop(0);
setTimeout(function () {
//ロード時の処理を待ち、時間差でスクロール実行
scrollToAnker(urlHash) ;
}, 100);
}

//通常のクリック時
$('a[href^="#"]').click(function() {
//ページ内リンク先を取得
var href= $(this).attr("href");
//リンク先が#か空だったらhtmlに
var hash = href == "#" || href == "" ? 'html' : href;
//スクロール実行
scrollToAnker(hash);
//リンク無効化
return false;
});

// 関数:スムーススクロール
// 指定したアンカー(#ID)へアニメーションでスクロール
function scrollToAnker(hash) {
var target = $(hash);
var position = target.offset().top;
$('body,html').stop().animate({scrollTop:position}, 500);
}
})