たまには部屋をかたづけようよ

部屋を片付けせなあかんと思いつついつも放置プレイ。そんな自分の日々の想いをつづった日記系ブログですよ？

最近書いた記事

はてなブログでページ内スムーズスクロールを実現させる

プログラミング

　これはもう言わずもがなのjQueryを使ったテクニックですが、はてなブログには「はてな記法モード」という編集モードがあって、その編集モードの場合、リンクの記述にちょっと注意が必要になるので、あえてエントリ記事を作成しました。

　やっていることは、他たくさんのブログで紹介されているjQueryのロジックと同じなので、その説明はほとんどなしで、あくまでも「はてな記法モード」での記述の仕方がメインです。

jQueryの説明

以下のjQuery(javascript)を、はてなブログの設定画面の「デザイン」→「カスタマイズ」タブ→「ヘッダ」→「タイトル下」（HTMLを記述できます）へ、コピペしてください。既にscript定義があれば、その中にマージしてもいいです。

　※ちなみに、はてなブログではjQueryがデフォルトで使えるので、script文でsrc指定してjquery.jsを定義しなくともいいんですよ。

<script>
//ページ内スムーズスクロール移動
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - 40;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

　＃13/7/11追記：はてなブログのデザインテーマ（#globalheaderの有無）によって、「position = target.offset().top - 40;」の行の「40]という値を変更する必要があることがわかりました。これが合ってないと、飛び先の位置が微妙にずれます。なので、このjQueryを適用する場合は適宜この数値の調整をお願いします。

「はてな記法モード」時のページ内移動の指定の仕方

　このjQueryを使う場合は、リンク先のタグ要素にid指定し、リンク元はaタグのhrefでid指定してやればいいのですが
　「はてな記法モード」の場合は、本来のはてな記法独自のリンクの書き方が出来なく、普通にaタグを書く必要があるので、そこが注意点です。

リンク先側の記述の仕方

　「はてな記法モード」では直接HTML記述も出来るので、以下のように指定してやります。

<span id="jump">リンク先はここです</span>

リンク先はここです

あるいは、飛び先が大見出し（h3タグ）でも良ければ、こういう書き方も出来ます。

*jump*リンク先はここです

リンク元の記述の仕方

　はてな記法の場合、リンクは本来は独自の書き方をするのですが、それをid名に置き換えただけではリンクにならないので、aタグを直接記述する必要があります。

　以下のように記述してもリンクになってくれません。

[#jump:title=「リンク先はここです」へ移動]

こんな感じ↓でそのまま表示されるだけで、リンクにならない
[#jump:title=「リンク先はここです」へ移動]


なので、以下のように普通にaタグを記述する必要があります。

<a href="#jump">「リンク先はここです」へ移動</a>
<a href="#main">エントリー記事トップへ移動</a>

「リンク先はここです」へ移動
エントリー記事トップへ移動　　※この#mainは最初からエントリー記事の先頭に定義されているid名です。


【関連記事】

【タグ】

｛jQuery｝

↑ページトップへ