概要
アンカーリンクまでのスクロールを滑らかにします（通称：ヌルヌルスクロール ← 私がそう呼んでいるだけ）
環境
- WordPress 5.3.2
- テーマ：Cocoon Child 1.0.8
前回の記事（アンカーリンク設定）
以下の記事でアンカーリンク（ページ内リンク）を設定しました。
前回の問題
ただ、上記のアンカー設定だけだと、クリックしたらジャンプ先に急に変わってしまいます。
急にジャンプすると、どこまでジャンプしたかわからないですね。
解決方法
そこでジャンプ先までスクロールして移動するようにします
これで、動きがわかりやすくなりますね(^^)
以下に記載しましたが、プラグインは私の環境では相性が悪かったのでやめ、ヘッダーにスクリプトを追記する方法で対応しました！
header.php内に以下の記述を追記します。
そのまま貼り付ければ動作します。
<script>
// ヌルヌルスクロール
jQuery(function(){
// #で始まるアンカーをクリックした場合に以下が動作
jQuery('a[href^="#"]').click(function(){
var speed = 800; // スクロール速度 msec
var href = jQuery(this).attr("href"); // アンカーの値取得
var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を取得
var position = target.offset().top - 100; // 移動先を数値で取得（固定ヘッダーがかぶるので位置調整）
jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); // ヌルヌルスクロールする
return false;
});
});
</script>移動した先で、ページ上の固定ヘッダー（メニューバーなど）と重なってしまって、見た目が良くなかったので、位置調整をしています。「-100」が位置調整量なので、これはご自身の環境に合わせて数字を調整してみて下さい。
var position = target.offset().top - 100; // 移動先を数値で取得（固定ヘッダーがかぶるので位置調整）貼り付け方
通常、ヘッダーファイル等は、よく知らない人が触るのは非推奨です（WordPressの挙動がおかしくなる可能性がある）
そこで、私は、ヘッダーをいじるためのプラグインとして、Head, Footer and Post Injections を使用しています。
ここではこのプラグインを使用している前提で説明します(^^)
多くのブログでこのプラグインは初めに入れるように紹介されていることが多いので、入っている方は多いかと思います。
設定 → 「Header and Footer」
「Head and footer」タブで一番上の、「ON EVERY PAGE」に先程のスクリプトを記載します。
もし、別のスクリプトが書いてあるのであれば、その下に追記すればOKです(^^)
最後に「SAVE」しておしまい
検討していたこと
まずはプラグインを検討しました
- Easy Smooth Scroll Links – Smooth Scrolling Anchor
- Page scroll to id
当初は、プラグイン＝楽 というイメージなので、上記のプラグインを入れて解決しようとしました。
しかし、Easy Smooth Scroll Linksは相性が悪くて、画面が真っ白になってしまいましたので辞めました。
アンカーリンクに使っているTinyMCE AdvancedとEasy Smooth Scroll Linksは競争するので一緒に使ってはイケない、との記事（以下↓）も見つけましたが、競争ではなくEasy Smooth Scroll Links 単体で有効にしてもダメでした。
Page scroll to id もアンカーの機能があるのでTinyMCE Advancedと競争しそうだったのでやめました（未検証）
上記を踏まえ、プラグインを使用しない方法としました。
参考
以下を参考にさせていただきました。ありがとうございます！
コメント