jQueryでページ内リンクをクリック時にスクロールさせる方法

同じページ内で特定の場所にジャンプさせたい場合はページ内リンクを使います。

通常ならリンク先に一瞬で移動しますが、jQueryを使うと下から上あるいは上から下にスムーススクロールしながらリンク先に移動させることも可能です。

ここではjQueryを使ってそのようなページ内リンクをスムーススクロールさせる方法を解説します。

ページ内リンクのやり方

まずページ内リンクの置き方ですがまずジャンプしたい要素のタグ内にid属性でidを割り振ります。

<p id="jump">ジャンプ先の要素</p>

上の例では「jump」というのがidです。

そして次のようにページ内リンクを設置するとそのリンクをクリックしたときにidが割り振られている要素にジャンプします。

<a href="#jump">ジャンプする</a>

idの前に#をつけることでページ内リンクだとブラウザに知らせることができます。

これがページ内リンクですが、ブラウザの標準機能だと一瞬でリンク先まで飛んでしまいます。それでも動きが無くて面白くないのでjQueryを使ってスムーススクロールを実装します。

スムーススクロールの実装

jQueryを使うと簡単にページ内リンクのスムーススクロールが実装できます。

次のコードが実装例です。

HTML文章

<a href="#1" onclick='_scrollTo("#1")'>#1にジャンプ</a><br/>
<a href="#2">#2にジャンプ</a><br/>
<a href="#3">#3にジャンプ</a><br/>

<br><br>
<br><br>
<br><br>

<p id="1">ジャンプ先1</p>
<br><br>
<br><br>
<p id="2">ジャンプ先2</p>
<br><br>
<br><br>
<p id="3">ジャンプ先3</p>

Javascriptコード

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 1000;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    $("html, body").animate(
        {scrollTop: target.offset().top}, speed, "swing");
    return false;
  });
});

このコードではページ内リンクしている全てのリンクがクリックされたときにスクロールするように設定しています。

スクリプト内の「speed」にはスクロールするミリ秒を渡し100を渡すと0.1秒、1000を渡すと1秒でスクロールします。この値が大きければ大きいほどゆっくりとしたスクロールになります。

ブラウザ上では次のような動作になります。

See the Pen yKyzVZ by kaz1503 (@kaz1503) on CodePen.dark

WordPressでスムーススクロールを使うには...

WordPressでページ内リンクのスクロール処理を実装しようとした場合、直接個別のページにスクリプトを書くより関数化したほうが手間が省けます。

そこでプラグインを使ってスクロール処理を関数化します。

必要なプラグインは「Simple Custom CSS and JS」というプラグインです。まず「プラグイン」－＞「新規追加」と進みプラグイン名で検索すると次のように検索結果に表示されます。

以下のURLからダウンロードして使うこともできます。

https://ja.wordpress.org/plugins/custom-css-js/

インストールして有効化するとメニューにプラグインの項目が追加されるので、「Custom CSS & JS」ー＞「Add Custom JS」と進むと次のようなスクリプト入力画面が出てきます。

スクリプトのタイトルを入力したら、その下にあるスクリプト記入欄に次のようなコードをスクリプトの最後に追加してください。

function _scrollTo(href, speed)
{
  var target = jQuery(href == "#" || href == "" ? 'html' : href);
  jQuery("html, body").animate(
    {scrollTop: target.offset().top}, speed, "swing");
  return false;
}

_scrollToという関数を定義しました。ただしWordPressでは「jQuery」の省略記号として$記号は使えないので注意してください。

これを書いてオプションを何も変更せず「公開」を押すと全てのページのヘッダー部分にこのスクリプトが挿入されます。

この関数の使い方ですが、たとえばidが「sccroll_to_here」という次のような要素があるとします。

<p id="scroll_to_here">ここまでスクロール</p>

この要素までスムーススクロールするようなページ内リンクを作るには次のように書きます。

<a href="#scroll_to_here" onclick='_scrollTo("#scroll_to_here", 500)'>ジャンプする</a>

onclick属性からリンクがクリックされたときに_scrollTo関数を呼び出しています。_scrollTo関数の１つめの引数にはリンクタグのhref要素の値、２つめの引数にはスクロール速度(ミリ秒)を渡します。

これで目的の場所までスムーススクロールされます。引数などについては好きなようにカスタマイズしてください。

その他のリンクのカスタマイズ術も紹介

今紹介したテクニックの他にも・・・

次みたいな リンク関連のカスタマイズ術 もいろいろ紹介してます。

• CSSだけでキラキラ光るリンクボタンを作る方法
• リンク色をWordPressで変える方法【全テーマ共通】
• WordPressで外部リンクにアイコン表示する手順

基本CSSコピペでできるので是非お試しください！

ほんの少しの工夫をするだけでも、クリック率をかなり上げることができますよ。

以上、jQueryを使ったリンクをスムーススクロールさせる方法の解説でした。