WPのスムーススクロールで動きがおかしい原因はLazy Loadプラグインだった!

wordpressのサイトに、スムーススクロールをつけて、
希望するID名のところまで、飛ばすページ無いリンクボタンをつけていたのですが、

なぜか、そのサイトだけ、

どうやっても、通り過ぎてしまうという現象が起こりました!!

スムーススクロールとは!

jqueryを最初に入れて、あとは<head>内に以下の記述をすれば、

あとは、#をつけたID名のリンクをつければ、
スルスル~っと、ページ内のリンクへ動かすことが出来るものです。

ちなみに、使い方は、まず、<head>でjqueryを読み込んでおき、
その後に、実行部分を記述するだけです!

↓こんな感じ

<?php wp_enqueue_script('jquery-1.12.4', get_bloginfo('template_url').'/js/jquery-1.12.4.js'); ?><!-- ページ内リンク、#非表示。スムーズスクロール --><script>$(function() {$('a[href^="#"]').click(function(){var speed = 800;var href= $(this).attr("href");var target = $(href == "#" || href == "" ? 'html' : href);var position = target.offset().top;$("html, body").animate({scrollTop:position}, speed, "swing");return false;});});</script><!-- ページ内リンク、#非表示。スムーズスクロール -->

↓そして、実際に動かすHTML部分

<a href="#buyTitle">商品の注文はこちら!</a>
・
・
・
<div id="buyTitle">ご注文</div>

ところがです!

なぜか、リンク先のID名を通り過ぎてしまうという現象がおきました!!

えっつ!なんなん!!ヌンヌン!!(吉本のスチコ風w)

というわけで、ブラウザでソースを見てみるとなんと<noscript>タグが勝手についているではあーりませんか!!

何これ!!
やめてあげてお父さん!!

というわけで、何故勝手に画像の部分にnoscriptタグが付いているのか調べ上げたところ、

wordpressのプラグインLazy Loadの停止でスムーススクロールが正常になった!

なんと、画像をスクロールに合わせてゆっくり読み込ませるためのプラグイン、Lazy Loadの仕業でした!

Lazy Loadプラグインを有効にしていると、画像の所に勝手にnoscriptがついてしまうのでした!!

なので、Lazy Loadプラグインを停止したところ、
noscriptが画像のhtml部分に付くこともなくなり、

正常にスムーススクロールが動くようになりました!!

めでたしめでたし!!
ではでは!!(^^)/

この記事が気に入ったら
いいね ! しよう