メモ_gushから_スクロールに応じてHTML部品の表示右下前に固定表示

2014/07/17 2015/04/18

要は最初は要素は固定で右下に表示
固定は下記で実施。

position: fixed;
bottom: 40px;
right: 20px;

デフォルトで非表示にしておいて、windowsのスクロール量取得(scrollTop)で一定にきたらanimateで表示！という事みたい。多分。animateに表示・非表示切り替えってあるのか？大体でだいたい。

こっちほぼ同じソース
http://www.webopixel.net/javascript/538.html

html

<!-- ページトップへ -->
<div id=&#34;page-top&#34;><a href=&#34;#header&#34;>PAGE TOP ↑</a></div>
<!-- //ページトップへ-->

js

jQuery(function() {
var showFlag = false;
var pageTop = jQuery(&#39;#page-top&#39;);
pageTop.css(&#39;bottom&#39;, &#39;-100px&#39;);
var showFlag = false;
//スクロールが400に達したらボタン表示
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 400) {
if (showFlag == false) {
showFlag = true;
pageTop.stop().animate({&#39;bottom&#39; : &#39;20px&#39;}, 200);
}
} else {
if (showFlag) {
showFlag = false;
pageTop.stop().animate({&#39;bottom&#39; : &#39;-100px&#39;}, 200);
}
}
});
//スクロールしてトップ
pageTop.click(function () {
jQuery(&#39;body,html&#39;).animate({
scrollTop: 0
}, 800);
return false;
});
});

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

/*--------------------------------------
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;
}