最近使ってるスムーススクロール【2020年版】

ページ内リンクでするする指定箇所まで移動する「スムーススクロール」。
いつも同じの使ってたんですが、最近になって見直したので、メモしておきます。

スムーススクロールはjQueryで実装してるんですが、時々移動した先で見出しの文字が見切れたり、ページ遷移＋スクロール移動の時の挙動がイマイチだったことがあって。

自分なりにカスタムがしやすく、レスポンシブでも使えるように作ったのが以下のコードです。

スムーススクロール2020年版

/* smooth scroll */
	
$(window).on('load',function(){
	var locUrl = location.href;
	var setHash = locUrl.split('#');
	//現在のページURLに#が含まれる場合はスクロール移動
	if(setHash[1]){
		hashMove("#"+setHash[1]);
	}
	//#pagetop
	$('#pagetop a').on('click',function() {
		var href = $(this).attr("href");
		var clkUrl = href.split('#');
		hashMove("#"+clkUrl[1]);
		return false;
	});
	//#を含むリンクは、リンク先と現在のページのURLを比較して判断
	$('a[href*="#"]').click(function() {
		var href = $(this).attr("href");
		var pageURL = location.pathname;
		reg = new RegExp(pageURL);
		//ページ名が同じならスクロール移動
		if (href.match(reg)) {
			var clkUrl = href.split('#');
			hashMove("#"+clkUrl[1]);
		}
	});

	function hashMove(trg){
		var position = $(trg).offset().top;
		if($('body').hasClass('admin-bar')){
			position = position - 50;
		}else{
			position = position - 20;
		}
		if($('body').width() <= 980){
			position = position - 50; //見出しの文字が切れるのを防ぐ
		}else{
			position = position - 150; //見出しの文字が切れるのを防ぐ
		}
		$('body,html').animate({scrollTop:position}, '800', 'swing');
	}
});

基本的にWordPressで使われることを想定しているので、hashMove() でもadmin-barのあるなし判定を追加してます。

ご入用の方はどうぞ。

LazyLoad系を使用している場合は注意

画像を読み込んでから要素位置を取得できるよう、$(window).on('load')後に実行するようにしてますが、LazyLoad系プラグインやライブラリを使用している場合、要素位置がうまく取得できないようです。

この辺りをうまく回避する方法を考えていますが、何かいいアイディアがあれば教えてください_(┐「ε:)_