6-7-2-3. Java Script の書き方

①.親フレームも含めて、ページのトップに戻す Java Script サンプル

	<!-- ページの先頭へ戻るボタンの準備 ここから -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>	
		$(function() {
		var topBtn = $('#page-top');
		topBtn.click(function() {
		$( 'html,body' ).animate( { scrollTop: 0 }, 500 );
		$( 'html,body', parent.document ).animate( { scrollTop: 0 }, 700 );
		return false;
		});
	});
	</script>

②.トップに戻るボタン css サンプル

	#page-top {
	    position: fixed;
    	bottom: 10px;
    	right: 10px;
    	font-size: 12px;
	}
	#page-top a {
    	background: #000011;
    	text-decoration: none;
    	color: #ffffff;
    	width: 100px;
    	padding: 10px 0;
    	text-align: center;
    	display: block;
    	border-radius: 5px;
	}
	#page-top a:hover {
    	text-decoration: none;
    	background: #FFCCFF;
    	color: #000000;
	}

③.HTML サンプル

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





スポンサー リンク




開発ノウハウ等