「ページ内リンク遷移後」という条件判定

Question

<a href="#hoge">hoge</a>

・単なるクリック判定ではなく、「ページ内リンクをクリック後hogeエリアが表示されたら」という条件分岐を追加することは出来ますか？

Answer 1

ちょっと面倒ですが、window の heightとscrollの量を計算し、対象の要素がwindow内にあることを判定することで可能です。

Answer 2

IntersectionObserver
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
https://qiita.com/yamanoku/items/027308e23cfc69845d7e

let observer = new IntersectionObserver(function(entries, observer) {
  if (entries[0].intersectionRatio > 0) {
    observer.unobserve(entries[0].target);
    console.log('show');
  }
});

$(document).on('click', 'a', function(event) {
  let element = document.getElementById('hoge');
  observer.observe(element);
  element.scrollIntoView({ behavior: 'smooth' });
  event.preventDefault();
  return false;
});

Answer 3

構造やcssにより、position().topが取得出来ない場合もありますが、こんな感じでいけるかと

	$('a[href^="#"]').click(function(e){
		e.preventDefault();
		
		var target = $(this).attr('href');
		if($(target).length > 0){
			$('html,body').animate({scrollTop: $(target).position().top}, 500, 'swing', function(){
				//ここに処理を記述
			});
		}
		
		return false;
	})

Answer 4

ハッシュチェンジイベントを使ってやればいけそうな気がしますが
https://syncer.jp/javascript-reference/event-handler/onhashchange