はてなブログで任意の要素にスムーズスクロールできる HTML・jQuery コード
このブログ 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 が有用だ。