問題
ハッシュ（#）ありの場合、スクロールして移動させるには？
解決策
URLに「location.hash」（ハッシュ：#）があるかどうかを判定し、ある場合はリンク先のIDのタグの位置「offset().top」までanimateで移動させる。
一旦通常表示してからIDのタグへスクロール
リンク先等がハッシュ（#）ありの場合、その値を持つIDのタグへ移動した状態で直接表示してしまいますが、一呼吸挟む形で、一旦通常表示してからIDのタグへスクロールして移動するようにしてみます。
DEMOはこちら
javascriptの構築
URLからハッシュを検出し、ある場合に処理を行います。
// URLに含まれるハッシュ（#）の取得
var urlHash = location.hash;
// URLにハッシュ（#）が存在するならば
if(urlHash) {
// 一旦ページ最上部へ移動
$('body,html').stop().scrollTop(0);
// ハッシュのIDを持つタグへ、animateでスクロールして移動
setTimeout(function(){
var target = $(urlHash);
var position = target.offset().top;
$('body,html').stop().animate({scrollTop:position}, 500);
}, 100);
}- 「location.hash」でURLからハッシュ（#）値を取得します。
- ハッシュ（#）値が存在する場合、「stop().scrollTop(0)」で一旦最上部へスクロール値を移動させます。
- その後、bodyタグ、htmlタグに対し、animateを用いてのハッシュのIDを持つタグの位置まで移動させます。
参考
【【jQuery】ページ内リンクをページ外からでもスムーズにスクロールさせる – WEBDESIGNDAY】
https://webdesignday.jp/inspiration/technique/jquery-js/4022/
コメント