not日報 メモ日和

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<title>		Scroll	</title>
</head>
<body>
	<body style="text-align:center;">
    <h1>スクロール実験</h1>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <div id="back-to-top" style="position:fixed; right:5px;bottom:5px;"><a href="#"></a></div>
    <div id="pos" style="position:fixed; left:5px;bottom:5px;"></div>
    <script>
    $(function(){
	    // #back-to-topを非表示に
	    $('#back-to-top').hide();
	    
	    // スクロールが十分にされたらback-to-topを表示 スクロールが戻ったら非表示
	    $(window).scroll(function(){
		    $('#pos').text($(this).scrollTop());
		    if ($(this).scrollTop() > 60){
			    $('#back-to-top').fadeIn();
		    } else {
			    $('#back-to-top').fadeOut();
		    }
	    });
	    
	    // #back-to-topがクリックされたら上に戻る
	    $('#back-to-top a').click(function(){
		   $('body').animate({
			   scrollTop:0
		   },500);
		   return false; 
	    });
    });
    </script>
</body>
</html>