メモ_gushから_スクロールに応じてHTML部品の表示 右下前に固定表示
2015/04/18
要は最初は要素は固定で右下に表示
固定は下記で実施。
position: fixed;
bottom: 40px;
right: 20px;
デフォルトで非表示にしておいて、windowsのスクロール量取得(scrollTop)で一定にきたらanimateで表示!という事みたい。多分。animateに表示・非表示切り替えってあるのか?大体でだいたい。
こっちほぼ同じソース
http://www.webopixel.net/javascript/538.html
html
1 2 3 |
<!-- ページトップへ --> <div id="page-top"><a href="#header">PAGE TOP ↑</a></div> <!-- //ページトップへ--> |
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
jQuery(function() { var showFlag = false; var pageTop = jQuery('#page-top'); pageTop.css('bottom', '-100px'); var showFlag = false; //スクロールが400に達したらボタン表示 jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 400) { if (showFlag == false) { showFlag = true; pageTop.stop().animate({'bottom' : '20px'}, 200); } } else { if (showFlag) { showFlag = false; pageTop.stop().animate({'bottom' : '-100px'}, 200); } } }); //スクロールしてトップ pageTop.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*-------------------------------------- TOPへ戻る --------------------------------------*/ #page-top { position: fixed; bottom: 40px; right: 20px; font-size: 12px; } #page-top a { background: #22ac38; text-decoration: none; color: #fff; width: 100px; padding: 10px 5px; text-align: center; display: block; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #90d59b; color: #444; } |
関連記事
-
-
【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (2) Casperjsのインストール
ということで続き。下記を参考に。 【参考】http://thesportsbus …
-
-
[js][GoogleAnalytics]GoogleAnalyticsのデフォルトのスクリプトについて調査
googleAnalyticsで貼り付けるスクリプトの中身ってなにやっているの& …
-
-
【HTML】【CSS】要素の横並び整理
要素を横並びさせる方法の整理。 Contents1 …
-
-
[js]JSONPについて整理
JSONPについて整理。 Contents1 JSONPとは2 な …
-
-
selectedを動的につけているセレクトボックスの選択解除・リセット
ちょっと、セレクトボックスの選択解除・リセットをしたい。 調べると …