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

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に戻るだけに限定しているようです。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました