はてなブログでページ内スムーズスクロールを実現させる
これはもう言わずもがなの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名です。
【関連記事】
- はてなブログでトップ位置固定のメニューを作成する
- はてなブログで位置固定のページトップボタンを設置する
- はてなブログのカテゴリ記事数によって、カテゴリ文字の大きさを変化させる
- はてなブログデザインテーマのCSS変更点を紹介するよ
- 「プログラミング」カテゴリ一覧へ
【タグ】
{jQuery}