システム Edit : 2020.05.28 Update : 2024.11.07

ページ内リンク(アンカーリンク)の位置がSafariでずれる時

どうでもよすぎるのですが、タイトルをつけた際に悲しい時〜悲しい時〜っていうスーツのお笑い芸人を思い出しました。

タイトルの通り、ただidを付けてページ内リンクを設定しているのに、Safariで別ページから遷移してきた際に位置がずれるという不思議な事案が発生ました。
以下のjsに書き換えた所、なおったのでメモしておきます(スルスル〜とスクロールされながらリンクの箇所へジャンプできます)。

Contents

jQuery

jQuery

  var headerHeight = $('.site-header').outerHeight();
	var urlHash = location.hash;
	if(urlHash) {
		$('body,html').stop().scrollTop(0);
		setTimeout(function(){
			var target = $(urlHash);
			var position = target.offset().top - headerHeight;
			$('body,html').stop().animate({scrollTop:position}, 500);
		}, 100);
	}
	$('a[href^="#"]').click(function() {
		var href= $(this).attr("href");
		var target = $(href);
		var position = target.offset().top - headerHeight;
		$('body,html').stop().animate({scrollTop:position}, 500);
	});

	var _window = $(window),
		_header = $('.site-header'),
		heroBottom,
		startPos,
		winScrollTop;

	_window.on('scroll',function(){
		winScrollTop = $(this).scrollTop();
		heroBottom = $('.hero').height();
		if (winScrollTop >= startPos) {
			if(winScrollTop >= heroBottom){
				_header.addClass('hide');
			}
		} else {
			_header.removeClass('hide');
		}
		startPos = winScrollTop;
	});

	_window.trigger('scroll');