[WordPress] スムーススクロール (プラグイン無し）

サイト内でアンカーリンク（同じページ内でのリンク移動）したりしますよね？普通にリンクすると、クリックした時に瞬時にピューン♪と移動します。ページ内なのか、他のページに移動したのか分からない感じになります。スムーススクロールなら、するするするっとページ内の目的の所に移動します。ちょと良い感じになります。プラグインを使用しない方法をご紹介します。

アンカーの付け方

id=”example”　を移動したい先に記載する。

それから、<a href=”#example”>exampleへリンク</a>

同じページで”example”　をidとして使用していない事を確認して下さい。（idはページ内に1回まで使用可）

Javascriptを追加する

以下のコードを私の場合は footerのテンプレートに追記ました。

<script>
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 600;
    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>

var speed = 600;の数字を変更すれば、スムーススクロールの速度を変える事が出来ます。

スムーススクロールが動かなかったら

jQueryが競合して動かないのかも。

$マークをjQueryに置き換えてみて下さい。こんな感じ　jQuery(function(){

アンカーリンクの位置がズレたら

ナビゲーションをTopに固定していたり、様々な要因で移動した先が少しズレている事があるかもしれません。何が正解か分かりませんが、CSSで位置調整をする方法をご紹介します。

先ほどの移動先にclassを追加します。

<a href="#example" class="anchor" >exampleへリンク</a>

そのclassで位置を調整します。

.anchor {
  display: block;
  position: relative;
  top: -90px;
  visibility: hidden;
}