WordPressのページ内リンクでスムーズにスクロール

スムーズスクロール WordPress
2017.07.27

今回はページ内リンクでスムーズに移動するテクニックを紹介します。

wordpressではjQueryを読み込んでいるので、jQueryで動くものはライブラリを使用します。

ページ内リンクとは？

目次などを実装しているサイトが増えてきています。その目次の項目をクリックした際に、ページ内でその位置まで移動できるリンクがページ内リンクです。

実現に必要なお約束

wordpressで、初期から読み込まれるjQueryをそのまま応用して実現できる形を目指します。

jQueryの後に読み込むJavaScript

<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>

このように書くことで、スムースな動きを実行できます。

スクロールのスピードは「speed」を変更すれば変更できます。また、最後に「false」を返すことで、URLに影響を与えないようにしています。

jQueryのアニメタグを使用しています。WordPressだと「$」が競合するので「$」の部分を「jQuery」に変更しましょう。

実際に書いてみよう

実際にソースコードを書いてみましょう。

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<script type='text/javascript' src='https://soricity.com/wpress/wp-includes/js/jquery/jquery.js'></script>
    <!-- ＃リンクのスムーズスクロール -->
    <script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>
    <title>jQuery</title>
<style type="text/css">
div{
  height: 1000px;
  margin-bottom: 4rem;
}
</style>
  </head>
  <body>
    <h1 id="index">目次</h1>
    <ul>
      <li><a href="#1">sample1</a></li>
      <li><a href="#2">sample2</a></li>
      <li><a href="#3">sample3</a></li>
      <li><a href="#4">sample4</a></li>
    </ul>
    <div id="1">
      <h2>sample1</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="2">
      <h2>sample2</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="3">
      <h2>sample3</h2>
      <a class="button" href="#index">Topへ</a>
      </div>
    <div id="4">
      <h2>sample4</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
  </body>
</html>

実行結果を確認してみましょう。

スクロールの速度を変えることでカスタマイズできるので、いろいろ試してみましょう。