N-takデザインブログ

WEBで培った作品や技術を公開しています。

スクロールが指定値に達したらボタン表示!初心者向けjavascriptの解説

どうも。N-tak.comです。

 

今日は、スクロールが指定値に達したらボタンが表示される

javascriptを解説します。

f:id:r4m0khksticiibypvp4k:20131021122922g:plain

 

 

 

javascript

<html>の<head>内に直接書き込むか、リンクで下記のjacascriptを繋げます。

 <script type="text/javascript">
$(function() {
var showFlag = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-200px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '20px'}, 200); 
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200); 
}
}
});
//スクロールしてトップ
    topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
    });
});
</script>

 

HTML

次にフッターあたりに下記を記述します。idがjavascriptの実行になっているので名前を変えるときはjavascriptも変更してください。


<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

 

CSS

次にCSSを記述します。

#page-top{position:fixed;bottom:10px;left:800px;font-size:77%;letter-spacing:.5em}

#page-top a{background:#069fa1;text-decoration:none;color:#fff;width:234px;padding:10px 0;text-align:center;display:block;border-radius:5px;letter-spacing:.5em;border:#FFF solid 3px;}

#page-top a:hover{text-decoration:none;background-color:#FFF;border:#069fa1 solid 3px;color:#069fa1;}

 

 

単純に背景色は文字色など通常のCSSで構いません。

では、サンプルサイトを見てください。

画面を下方向にスクロールすると、スッと現れてきます。

サンプル(n-tak.com)

 

引用参考サイト

スクロールするとひょいっと出るトップへ戻るボタン

 

 

以上、初心者向けjavascriptの解説でした。