お問い合わせはコチラから

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

javascriptを呼び出すリンクは大抵”#”だけのリンクになっていることが多く、スムーズスクロールが邪魔して、なぜかTOPに移動してしまう動きに悩まされます。

自分のサイトであれば、問題が起きた時にaリンクを逐一除外していけば問題は起きないのですが、多くの人が利用するテーマの場合にスムーズスクロールを組み込むと、どんなプラグインを使われるかわからないので多くの場合問題が起きます。

そのため、Cocoonは事前に問題が起きないようにTOPに戻るだけに限定しているようです。

タイトルとURLをコピーしました