[み]jQueryでページ外リンクでも、指定位置にスムーズスクロールさせる方法

みはら.comでも設置している「PAGE TOP arrowup」のように、ページ内リンクでスムーズにスクロールさせるのはよく見かけるパターンのやつだと思います。

でも、グローバルナビなどでドロップダウンメニューにしていて、アンカーをつけてリンク先を指定している場合なんかもあるんではないでしょうか?こんな感じのコードの時です。

<nav>
    <ul>
        <li>
            <a href="index.html">HOME</a>
        </li>
        <li>
            <a href="about.html">ABOUT</a>
            <ul>
                <li><a href="about.html#company">COMPANY</a></li>
                <li><a href="about.html#member">MEMBER</a></li>
            </ul>
        </li>
        <li>
            <a href="works.html">WORKS</a>
            <ul>
                <li><a href="works.html#website">WEBSITE</a></li>
                <li><a href="works.html#logo">LOGO</a></li>
            </ul>
        </li>
        <li>
            <a href="contact.html">CONTACT</a>
        </li>
    </ul>
</nav>

例えば、MEMBERをクリックすると、id=memberを指定したところへ移動するんですが、ページの途中なので、するするーっとスクロールした方が、コンテンツの長さとか見えていい感じですよね。

ページ外リンクでも、指定位置にスムーズスクロールさせる方法

まずは、htmlの方を少し変更します。#で位置を指定していたのを、?id=に変更します。さっきの例でいくとこんな感じです。

<nav>
    <ul>
        <li>
            <a href="index.html">HOME</a>
        </li>
        <li>
            <a href="about.html">ABOUT</a>
            <ul>
                <li><a href="about.html?id=company">COMPANY</a></li>
                <li><a href="about.html?id=member">MEMBER</a></li>
            </ul>
        </li>
        <li>
            <a href="works.html">WORKS</a>
            <ul>
                <li><a href="works.html?id=website">WEBSITE</a></li>
                <li><a href="works.html?id=logo">LOGO</a></li>
            </ul>
        </li>
        <li>
            <a href="contact.html">CONTACT</a>
        </li>
    </ul>
</nav>

続いて、jQueryのほうは、こんな感じです。

$(function() {
    var url = $(location).attr('href');
    if(url.indexOf("?id=") != -1){
        var id = url.split("?id=");
        var $target = $('#' + id[id.length - 1]);
        if($target.length){
            var pos = $target.offset().top;
            $("html, body").animate({scrollTop:pos}, 1500);
        }
    }
});

urlの中の?id=を探して、そのidがついた要素のところにスクロールさせるっていうことです。

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup