jQueryでスムーズスクロールで特定リンクを除外

殆どのサイトで見かけるTOPに戻るボタンは、jQueryで実装されることが殆どで、その場合スムーズスクロールも合わせて実装されていると思います。

実は、このスムーズスクロールが結構曲者で、TOPに戻るボタン以外に適用すると結構な頻度で問題が起きるので、TOPに戻るボタン以外にはスムーズスクロールを適用したくないことが多いです。

この記事では、jQueryで実装されたスムーズスクロールから特定のアンカーリンクを除外する方法についてまとめておきます。

この記事で分かること

スムーズスクロールで起きるトラブル
1. Lazyloadを有効にした時に、目次から飛び先がずれる
2. javascriptの呼び出しリンクで変な動きになる
よくあるスムーズスクロールのjQuery
#は、”#”にしないとSyntax Errorになる
特定の#リンクを除外するには？
まとめ

スムーズスクロールで起きるトラブル

スムーズスクロールが問題となる理由は大きく2つです。

飛び先の位置からスクロール量を計算している
ページ内のアンカーリンクのみを対象としている

Lazyloadを有効にした時に、目次から飛び先がずれる

これはよく知られた問題です。

Lazyloadを有効にすると画像の読み込みは、画像の位置に行くまで行われません。目次の飛び先の位置は、画像が表示される前の状態で行われているため、飛び先の手前に画像がある場合、画像サイズ分ズレた場所が飛び先となってしまいます。

この解決方法は、いくつかありますが、以下の記事でスムーズスクロールのjavascriptを改造して対応したことがありますので、興味のある方は参考にしてください。

Lazy Loadで目次のジャンプ先がずれてしまう場合の対処方法

目次プラグインは便利なので利用している人は多いでしょう。しかし、ブロックエディタを使っていると見出しの飛び先がずれるという現象に出くわします。例えば、目次プラグインなどで挿入した目次から見出しにジャンプする時にズレたり（手前の変な位置で止ま...

javascriptの呼び出しリンクで変な動きになる

ボタンを押すとjavascriptが起動されるような場合、ボタンのリンク先が”#”となっていることがあります。

不幸なことにリンク先が”#”というのは、TOPに戻ると同じ意味を持ちます。

そうなると、そのボタンを押したときにスムーズスクロールが起動しTOPに戻ってしまう動きになります。

その際、スムーズスクロールしてほしくないアンカーリンクというのが出てきます。

よくあるスムーズスクロールのjQuery

	$('a[href^=#]).click(function() {
		var headerHight = $('.main-header-clone').outerHeight()+45;
		var href = $(this).attr('href');
		var target = $(href == '#' || href == '' ? 'html' : href);
		var position = target.offset().top-headerHight;
		$('html,body').animate({scrollTop:position}, 400, 'swing');
	} );

#は、”#”にしないとSyntax Errorになる

jQueryの新しいバージョン（通常のWordpressで呼ばれるバージョンも対象）では、#を”#”にしないとエラーになるケースがあります。

後述する特定リンクを除外する時に、急にエラーになり、そうじゃない時はエラーにならない。

これはとても分かりにくいバグなので、覚えておいて損はないです。

	$('a[href^="#"]).click(function() {
		var headerHight = $('.main-header-clone').outerHeight()+45;
		var href = $(this).attr('href');
		var target = $(href == '#' || href == '' ? 'html' : href);
		var position = target.offset().top-headerHight;
		$('html,body').animate({scrollTop:position}, 400, 'swing');
	} );

特定の#リンクを除外するには？

:not()を使えば行けます。わかりにくいのが、最後がaタグで終わらなければならないところです。

	$('a[href^="#"]:not(.tabs a):not(.gridlist-toggle a)').click(function() {
		var headerHight = $('.main-header-clone').outerHeight()+45;
		var href = $(this).attr('href');
		var target = $(href == '#' || href == '' ? 'html' : href);
		var position = target.offset().top-headerHight;
		$('html,body').animate({scrollTop:position}, 400, 'swing');
	} );