趣味イラストレーターのオタク主婦のひっそりブログ。

とりとめのない日記です。メインサイト:http://hide.kanari.info/ ブログ:http://kanari.info/b/

このはてなブログでの「トップへ戻るリンク」をjQueryでヌルヌルと動くようにしました。

f:id:k-h:20140108162308j:plain

参考にしたのは、【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHEの記事です。

単純に、以下のソースをコピーしてはてなブログのフッターにペーストするだけです。

<a href="#">▲TOPへ</a>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href)
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

これだけだと単にリンクが挿入されるだけなので、スタイルシートで装飾すると良いかと思います。

ヌルっとスクロールが動くのは楽しいです。
あとメリットとしては、JavaScriptにするとトップに戻るリンクをクリックしても
http://webmaterials.hateblo.jp/#
とかにならず
http://webmaterials.hateblo.jp/
のままなので、はてなブックマークをして貰う時などに便利かなと思います。

jQuery便利ですね。Googleがファイルを用意してくれているので、直接アップロードしなくても使えるのもメチャクチャありがたいです。

広告を非表示にする

▲TOPへ