jQueryでつくる先頭ジャンプ

jQueryでつくる先頭ジャンプ

jQueryで、クリックすると先頭へジャンプするようなボタンをつくったのでメモ。

ソース

処理としては,

1. 最初は先頭ジャンプ用のリンクを消しておく。 ( $('リンク').hide();)
2. ある程度スクロールされたら、リンクを表示( $('リンク').fadeIn();)。また、スクロールが先頭付近であればリンクを表示しない( $('リンク').fadeOut(); )。
3. リンクをクリックされたら、指定ミリ秒かけてスクロール量(scrollTop)を 0 にして( $('html').animate({ scrollTop:0 }, 指定ミリ秒 ); )、上に戻る。

   ※CodePenでは、animate関数のセレクタは[html]じゃないと動かなかった。通常のブラウザでは、htmlではなく[body]で動くと思います。

codepen.io

参考リンク

今回は、簡単のために「↑ (上矢印)」を使ったが、border-top, border-rightなど使って、> (大なり)を回転させたようなものにしたらもっとかっこよくなりそう。それは今度に。

しかし、重さを考えるとjQuery をあまり使いたくないので、CSS3 だけでなんとかならないかな・・。