リンク先のページでスムーズスクロールさせる方法

カテゴリー:javascript

今回はスムーススクロールをリンク先ページでも実行する方法をご紹介
(スムース?スムーズ?どっちが正しいのかが分かりません笑)

使う場面としては、faqの種類別リストみたいなところから、
種類ごとの一覧ページに飛ばしたいんでけど、デザインの都合上
ヘッダーにfixedなどをかけてて、文字の上に重なっちゃってタイトルが隠れちゃうなどというときに使えます!
(こんな場面しょっちゅうあるものだろうか、、、?)

まず、faqの種類別ページではリンクを

<a href="detail.html?id=faq01">linkpage</a>

のように張ります

飛ばしたい先のページを

<p id="faq">
    faqだぞ、こら!
</p>

(ここはいたって普通だね)

同じく飛ばした先のページに

$(function(){
    var url = $(location).attr("href");
    if (url.indexOf("?id=") == -1) {
        // 通常のスムーススクロールはここ!
        // 必要がない場合は飛ばし
    }else{
        // スムーススクロールの処理
        var linkID = url.split("?id=");
        var hash   = "#" + linkID[linkID.length - 1];
        var tgt    = $(hash);
        var pos    = tgt.offset().top;
        $("html, body").animate({ scrollTop : pos }, 500, "swing");
    }
});

スムーズスクロールを全ページに使っている場合は全ページに読み込んでも問題ない(はずだよ、、、?)!

たったこれだけで終わり!
スムーズに完成してよかった~笑