問題 × 解決策

ハッシュ(#)ありの場合、スクロールで移動させる

問題

ハッシュ(#)ありの場合、スクロールして移動させるには?

解決策

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/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fifteen + eighteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧