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

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

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

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

※2020年3月9日にちょっと修正

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

<pre class="wp-block-syntaxhighlighter-code">/* smooth scroll */
	
$(window).on('load',function(){
	var locUrl = location.href;
	var setHash = locUrl.split('#');
	//現在のページURLに#が含まれる場合はスクロール移動
	if(setHash<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />){
		hashMove("#"+setHash<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />);
	}
	//#pagetop
	$('#pagetop a').on('click',function() {
		var href = $(this).attr("href");
		var clkUrl = href.split('#');
		hashMove("#"+clkUrl<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />);
		return false;
	});
	//#から始まるリンクはスクロール
	$('a[href^="#"]').on('click',function() {
		var href = $(this).attr("href");
		var clkUrl = href.split('#');
		hashMove("#"+clkUrl<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />);
	});
	//#を含むリンクは、リンク先と現在のページのURLを比較して判断
	$('a[href*="#"]').on('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<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />);
		}
	});

	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');
	}
});</pre>

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

ご入用の方はどうぞ。