作りたいから作ったシリーズ_０２　　　　　例のボタン

サイトでよく見るアレ！！

今週も頑張っていきましょう！（早くも息切れ気味💦）
昨今のウェブサイトにかならず設置されている「アレ」
実際につけてみた！！

そう。それは「戻る」ボタンです！！

ある程度ページをスクロールさせると下の方から出て来るやつなのです

じぇじぇじぇの「jQuery」！！

言いたかっただけ（オイラは岩手県民）
このボタンは「jQuery」を使って実装してみた
色んなメソッドが使えるのですごく手軽で便利
（とはいえ学習コストは掛かります）
以下、「jQuery」のサンプルコード（HTML＆CSS別途設定必要）

$(function() {
 
 var appear = false;
 var pagetop = $('#page_top');
 $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {  //100pxスクロールしたら
     if (appear == false) {
       appear = true;
       pagetop.stop().animate({
         'bottom': '60px' //下から60pxの位置に
       }, 300); //0.3秒かけて現れる
     }
   } else {
     if (appear) {
       appear = false;
       pagetop.stop().animate({
         'bottom': '-60px' //下から-60pxの位置に
       }, 300); //0.3秒かけて隠れる
     }
   }
 });
 
 pagetop.click(function () {
   $('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
   return false;
 });

});

こんなのもあります！！

モーダルウィンドウ（別枠のウィンドウで最前面に出て来るやつ）の
表示、非表示を切り替えてログインフォームなどを作れます
一気に垢抜けた感じになります！

次回も多分「jQuery」！！

トップの画像がスライドショーみたいに動いたり、動画を流したり出来たら
いいなあと思いつつ今回はここまでです

バックナンバー！！

まだ１記事しかございません