[jQuery]アンカーリンクで飛んだ先のアンカー要素にclassを付与してハイライトする #JavaScript

リンク先が他のページ内のアンカーだった時に、その要素をハイライトさせる（目立たせる）ためのスクリプトです。

表示イメージ

以下のようなページにリンクしていたとします。

▼こちらは普通に表示した場合。

▼こちらはアンカーリンクで飛んだ場合。
ハイライト用のclassを付与することでアンカーの部分を目立たせています。

なんとなくイメージできましたでしょうか。

以下がコードです。

jQueryを使うので、head内に予め読み込んでおいてください。

<head>
<!-- 例 -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

HTML
リンク先（アンカーがある）ページのコードサンプルです。

<div>
ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。世の中にある人とすみかと、またかくのごとし。 
</div>

<div id="hoge">
祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。
</div>

<div>
雨にも負けず<br>風にも負けず<br>雪にも夏の暑さにも負けぬ
</div>

このページの #hoge の部分にリンクさせています。
このページに以下のスクリプトを読み込ませ、active というclass名を付与させます。

※リンク元ではなく、リンク先のページになります。

また、アンカーリンクだとウィンドウのトップに#hogeがきてしまうので、すこしトップに余白をつけてピッタリにならないようにしています。

JavaScript

$(document).ready(function(){
    //▼ページ全体をフェードで表示させています。不要な場合は以下の二行は削除してください。
    $('body').hide();
    $('body').fadeIn('fast');
    //▲ここまでフェードの処理

    var anchor = $(location).attr('hash');  //アンカー名を取得
    var point = $(anchor).offset().top;     //要素の位置を取得
    var position = point - 100;             //余白

    //要素の位置（＋余白）までスクロール
    $('html,body').animate({
        scrollTop : position
    }, 400);

    //ハイライトするためのclass名を付与
    $(anchor).addClass('active');
});

CSS
ハイライトのスタイルはお好みで。

/* ハイライトさせるclass名 */
.active {
    background-color: #ffffcc;
    box-shadow:0 0 0 3px red;
}

以上です。

リンク先に飛んだ時に、ページの途中が表示されるとどこを見ればいいの？と戸惑うことがたまにあるので、こういう処理があると便利なのではと思いました。

同一ページ内のアンカーリンクでも同じスクリプトで対応出来るかと思います。