Blog

jqueryとcssを使って途中で現れるtopへ戻るボタン

投稿サムネイル

こんにちは、前回から時間がかなり空いたので、自分の記事のテイストを忘れてしまったMEの井原です。
僕らGEEKの[ME TEAM]は毎月1回情報共有のためのmeetingを行っていますが、先月もっとブログをGEEKっぽくする!と方針が決まったので、実戦で役立つ情報を共有していきたいと思います!
それでは、さっそくですが下のresult画面で動きを見ましょう
 [codepen_embed height=”386″ theme_id=”15981″ slug_hash=”oXexvR” default_tab=”result” user=”geek-mihara”]See the Pen <a href=’http://codepen.io/geek-mihara/pen/oXexvR/’>toTopscroll</a> by mihara (<a href=’http://codepen.io/geek-mihara’>@geek-mihara</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
下にスクロールするとトップへ戻るボタンが右下から現れると思います。
jqueryの処理は2つで、

  1. トップへ戻るボタンを下から出現させる。
  2. ボタンを押した時にアニメーションして上に移動する。

です。

トップへ戻るボタンを下から出現させる。

まず、cssです。
ボタン自体を隠しておきます。bottom -20pxがそれです。
このcssで大切なのはtransition all 1sです。これがあれば1秒かけてこのクラスの値が変化してくれます。(つまりアニメーションですね
これがないと、一瞬で移動してしまうので急に現れたように見えると思います。ですので、忘れず設定しておきましょう。
次にjsです。
3行目はトップへ戻るボタンを指定しています。
if(window.scrollY > 100) {
スクロールの値を取得していて縦方向に100pxより多く移動している場合にこれ以下を実行します。
$topBtn.addClass(‘is_appear’);
is_appearというクラスを与えています。

} else {
スクロール値が100以下の場合の処理です。

$topBtn.removeClass(‘is_appear’);
今度はis_appearを外しています。
is_appearとはなんぞ!?というのはcssで定義されています。.toTopのデフォルトがbottom -20pxだったのですが、
.is_appearがつくことでbottom 30pxに変更されます。
そうすると先ほどのtransitionのおかげで、-20pxから30pxまで1秒かけて変更されます。
これによって.toTopにis_appearがつくだけでアニメーションします。

ボタンを押した時にアニメーションして上に移動する。

こちらは特にcssを設定する必要はありません。
15行目からがトップへ戻るjsが定義されています。
var scrollArea = $(‘html, body’);
まず選択範囲をhtmlとbodyにします。

$topBtn.on(‘click touchend’, function(){
クリックとタッチした指を話した時にこれより下のファンクションが走ります。
scrollArea.animate({scrollTop:0}, ‘500’, ‘swing’);
scrollAreaをアニメーションさせ、500msでtopまでスクロールさせます。
$topBtn.removeClass(‘is_appear’);
is_appearを外すことでトップへ戻るボタンを隠します。

それぞれを実行させる。

あとはそれぞれをページが読み込まれた際に実行させます。
$(window).scrollはページをスクロールするたびに実行されるメソッドです。
$(function(){
    toTop();
    $(window).scroll(scrollToTop);
});
 

まとめ

以上です。トップへ戻るボタンはあらゆるサイトで使われているので有用だと思います。
是非、実際に自分で書いてみましょう!
今回、初めてcode penを使って見たのですが、jadeや、stylusなどで記述できて、さらに操作エディタをvimに設定できるので最高でした。
今後もcode penを使って記事を更新していくと思うのでよろしくお願いします。

最新の技術と手法を用いて、
IT分野で変化と進化を続ける
Webインテグレーター

神田北信ビルエントランス

株式会社GEEK 〒101-0033
東京都千代田区神田岩本町4-4 神田北辰ビル3F

CATEGORIES