scrollTop

  • jqueryのプラグインを使わず簡単なjavascriptとcssで実現可能。

    サンプルページ

    まずはjqueryを読み込む

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    一定の範囲スクロールしたらボタンを表示させ、クリックでページトップへスクロールするjavascriptを読み込む

    JAVASCRIPT

    <script type="text/javascript">
    $(function(){
    	$('#top-link').hide();
    	$(window).scroll(function(){
    		if($(this).scrollTop() > 50){
    			$('#top-link').fadeIn(1000);
    		}else{
    			$('#top-link').fadeOut(500);
    		}
    	});
    	$("#top-link").click(function(){
    		$('html, body').animate({scrollTop:0},300);
    	});
    });
    </script>

    解説

    スクリプト内の数字「50」は、ページが何ピクセルスクロールされたら処理を行うかの数値
    スクリプト内の数字「1000」はボタンがフェードインする速度
    スクリプト内の数字「500」はページトップでボタンがフェードアウトする速度
    スクリプト内の数字「300」はスクロールする速度

    ボタンを表示させたままで構わなければもっと簡単

    <script type="text/javascript">
    $("#top-link").click(function(){
    	$('html, body').animate({scrollTop:0},500);
    });
    </script>

    スタイルシートも単純 サンプルではグレイの四角ボタンにしているが、テキスト表示や画像で構わなければもっと簡単

    CSS

    <style>
    #top-link{
    	position:fixed;
    	right: 10px;
    	bottom: 30px;
    	padding:10px 0px;
    	width: 100px;
    	text-align:center;
    	color:#fff;
    	cursor:pointer;
    	cursor:hand;
    	background-color:#ccc;
    }
    </style>

    ボタンの設置も簡単 Page Topのボタンはbody内のどこに記述しても構わない。

    HTML

    <div id="top-link">Page Top</div>