バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


スポンサーサイト

カテゴリー:-

一定期間更新がないため広告を表示しています

0
     | - | | | pookmark

    jQueryだけでも!その2

    カテゴリー:技術的なところ
    前回の続編・・といっても、かなり間があいてしまいました。言い訳ではございませんが、決して忘れてた訳じゃなく、記事を書いてる途中の状態でなかなか仕上げられずにそのままになってしまっておりました。しかもこのカテゴリーの投稿自体が、実はかなりペースダウンしてきてます・・・やはり現場を離れてるだけあって、鬼気迫る日々の技術的な解決策を検証することもなければ、そのために新たな技術習得を必要とすることもないので、基本的に自分次第なんですが、私・・根っこがズボラなもんで。リハビリと称して記事を書きつつも、なかなか向上心を維持し続けることも難しく・・あ、これはもう言い訳になってますね、完全に・・・

    **********

    ということで・・、どういうことで?
    前回の記事はこちらです。 → [jQueryだけでも!その1]

    今回は、ページの先頭へ戻るボタンの表示について、このブログでやってるjQueryだけで設定してる方法の説明をば。と言っても、前回と同様、お知恵拝借の関数をほぼそのまま使っております。下記に掲載しておきますのでよろしければご自由にご利用くださいませ〜!

    まず最初にjQuery本体を読み込ませます。
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <!-- <head>要素内に記述〜読み込ませるバージョンには注意が必要 -->
    
    ※JSファイルをダウンロードしたものを利用してもO.K.ですよ!
    ダウンロードできるバージョンの違いについては、前回の記事[jQueryだけでも!その1]をご参照くださいませ。
    ◎ちなみに本家サイトです → jQuery

    ☆☆パターン① (以前の)フェードイン表示タイプ☆☆
    <script>
    $(function() {
    	var topBtn = $('#page-top'); //要素に適用するidを設定→HTML内でこのidを指定しておく	
    	topBtn.hide();
    	//スクロールが200に達したらボタン表示
    	$(window).scroll(function () {
    		if ($(this).scrollTop() > 200) { //ここの数値の変更=ボタン表示のタイミング変更
    			topBtn.fadeIn();
    		} else {
    			topBtn.fadeOut();
    		}
    	});
    	//クリックでスクロールしながらトップに戻る動作設定
            topBtn.click(function () {
    		$('body,html').animate({
    			scrollTop: 0
    		}, 250); //スクロールのスピード設定値
    		return false;
        });
    });
    </script>
    
    /*-----------------------------------------------
    ページの先頭へ戻るボタン
    -----------------------------------------------*/
    #page-top { position:fixed; bottom:20px; right:20px; z-index:9999; text-indent:0}
    * html #page-top { position:absolute; bottom:20px; right:20px; z-index:9999; text-indent:0}
    #page-top a { text-decoration:none; width:90px /* 数値は適当に合わせてください */; display:block}
    #page-top a:hover { text-decoration:none}
    

    ☆☆パターン② (現在の)にゅるっと下から表示タイプ☆☆
    <script>
    $(function() {
    	var showFlug = false;
    	var topBtn = $('#page-top'); //要素に適用するidを設定→HTML内でこのidを指定しておく
    	//最初はボタンをページ表示範囲外に配置
    	topBtn.css('bottom', '-100px');
    	var showFlug = false;
    	//スクロールが200に達したらボタン表示
    	$(window).scroll(function () {
    		if ($(this).scrollTop() > 200) { //ここの数値の変更=ボタン表示のタイミング変更
    		     if (showFlug == false) {
    		           showFlug = true;
    		           topBtn.stop().animate({'bottom' : '20px'}, 200); //ボタンをbottomから20pxの位置に表示させる(200はスクロールスピード値)
    		     }
    		} else {
    		     if (showFlug) {
    		           showFlug = false;
    		           topBtn.stop().animate({'bottom' : '-100px'}, 200); //ボタンを最初の位置に戻す(200はスクロールスピード値)
    		     }
    		}
    	});
    	//クリックでスクロールしながらトップに戻る動作設定
     	topBtn.click(function () {
    		$('body,html').animate({
    			scrollTop: 0
    		}, 250); //スクロールのスピード設定値
    		return false;
     	});
    });
    </script>
    
    /*-----------------------------------------------
    ページの先頭へ戻るボタン
    -----------------------------------------------*/
    #page-top { position:fixed; right:20px; z-index:9999; text-indent:0}
    * html #page-top { position:absolute; right:20px; z-index:9999; text-indent:0}
    #page-top a { text-decoration:none; width:90px /* 数値は適当に合わせてください */; display:block}
    #page-top a:hover { text-decoration:none}
    

    (X)HTML内で、先頭へ戻るボタンを設置するブロック部分のソースは下記のとおりで、場所は</body>の上あたりや、その近辺にでも記述しておけば大丈夫ですよ!
    <p id="page-top"><a href="#top" title="ページの先頭へ戻る"><img src="ボタン画像をアップしているサーバーディレクトリーのパス/*****.png" alt="Button of Back to Top"></a></p>
    


    結局、前回と今回、ご紹介した関数の内容って、jQueryのメソッドっていう基本的な仕組みを使った動作の連鎖を、ある条件(トリガー)を設定して、その条件をクリアすれば発生させたり、元に戻したりさせてるんですねー。この“jQueryメソッド”、いろいろとありまして、連結して記述するとメソッドチェーンといって順番に動作処理してくれるという仕様や、2〜3個のメソッドを覚えれば、かなりjQueryだけで面白いアニメーションができたりと、工夫次第で、いろんなプラグインを読み込んでお腹がいっぱいになってページが重たく(表示が遅〜く)なるくらいなら、“jQueryメソッド”を使って自分なりに何とかしてしまった方がHTML自体の身が軽〜くなってダイエット成功!!なんてことにつながるかもですよー!!

    また、機会があれば次回は是非そのあたり、“jQueryメソッド”のお話を・・・
    0
       | 技術的なところ | | | pookmark

      スポンサーサイト

      カテゴリー:-
      0
         | - | | | pookmark
        コメント欄
        コメントする


        ※メールアドレスは公開されません

        ※Name:欄に入力したお名前にリンクが設定されます




        この記事のトラックバックURL
        http://stressful.jugem.jp/trackback/125
        トラックバック

        Button of Go to Home

        Button of Back to Top