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

こんにちは、前回から時間がかなり空いたので、自分の記事のテイストを忘れてしまったMEの井原です。

僕らGEEKの[ME TEAM]は毎月1回情報共有のためのmeetingを行っていますが、先月もっとブログをGEEKっぽくする!と方針が決まったので、実戦で役立つ情報を共有していきたいと思います!

それでは、さっそくですが下のresult画面で動きを見ましょう

See the Pen toTopscroll by mihara (@geek-mihara) on CodePen.15981

下にスクロールするとトップへ戻るボタンが右下から現れると思います。

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を使って記事を更新していくと思うのでよろしくお願いします。

投稿者プロフィール

GEEKstaff
GEEKstaff
株式会社GEEKの制作チームです。
Web業界の気になるニュースのまとめと、制作に役立つ記事を投稿しています
このエントリーをはてなブックマークに追加
はてなブックマーク - jqueryとcssを使って途中で現れるtopへ戻るボタン
Facebook にシェア
[`evernote` not found]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です