Corredor

ウェブ、プログラミングの勉強メモ。

はてなブログで任意の要素にスムーズスクロールできる HTML・jQuery コード

はてなブログで月収30万円を稼ぐ裏技

はてなブログで月収30万円を稼ぐ裏技

このブログ Corredor は、ウィンドウサイズを狭めると、ヘッダロゴの右上にハンバーガーメニューが登場するようになっている。これをクリックすると、「カテゴリ一覧」部分までアニメーションでスクロールする。

ちょっと前までは <a href="#box2"> という単純なページ内リンクで、サイドメニューの最上部に一気にスクロールするようにしていたのだが、はてなブログは jQuery が読込済であることを利用して、ちょっとした jQuery コードでスムーズスクロールするようにしてみた。

出来上がったコードは以下のとおり。

<a href="#" onclick="$('html,body').animate({scrollTop:$('.hatena-module-category').offset().top});return false;">
  <i class="blogicon-reorder"></i>
</a>

重要なのは onclick 属性部分のみ。href="#" はリンクとして効かせるために書いたまでなので、別に button 要素でも良い。内容物の i.blogicon-reorder はハンバーガーメニューアイコンなのでお好きに変えれば良い。

カスタマイズするには、$('.hatena-module-category') 部分をスクロールしたい対象要素を特定する ID やクラス名に書き換えれば良い。

例えば、カテゴリ一覧ではなく検索窓部分にスムーズスクロールしたいなら、以下のようにする。ついでにボタンにしてみた。

<button onclick="$('html,body').animate({scrollTop:$('.hatena-module-search-box').offset().top});">検索窓へ</button>

はてなブログをカスタマイズしていくには、まだまだ jQuery が有用だ。