<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="page">
  <header class="header">
    ここにヘッダーが入ります
    <ul class="navi">
      <li><a href="#sec01">section01</a></li>
      <li><a href="#sec02">section02</a></li>
      <li><a href="#sec03">section03</a></li>
      <li><a href="#sec04">section04</a></li>
      <li><a href="#sec05">section05</a></li>
    </ul>
  </header>
  <div class="container">
    <section id="sec01">
      section01
    </section>
    <section id="sec02">
      section02
    </section>
    <section id="sec03">
      section03
    </section>
    <section id="sec04">
      section04
    </section>
    <section id="sec05">
      section05
    </section>
  </div>
  <div class="pagetop">
    <a href="#page">▲ ページトップへ </a>
  </div>
</div>
*{
  padding:0;
  margin:0;
}
#page{
  text-align:center;
  padding-top:80px;
}
.header{
  width:100%;
  height:80px;
  background:#333;
  color:#fff;
  position:fixed;
  top:0;
}
.navi{
  text-align:center;
  padding:15px 0;
}
.navi li{
  display:inline-block;
  list-style:none;
  padding:0 1em;
}
.navi li a{
  color:#fff;
}
.container{
  background:#fff;
}
.container section{
  background:#ccc;
  height:150px;
  margin-bottom:20px;
  padding:20px;
}
.pagetop a{
  padding:15px;
  display:block;
  color:#333;
  text-decoration:none
}
jQuery(function(){
var headerHight = 80; //ヘッダーの高さをpx指定
	//*ページ内リンクの指定
	jQuery('a[href^=#]').click(function(){
		var href= jQuery(this).attr("href");
		var target = jQuery(href == "#" || href == "" ? 'body' : href);
		var position = target.offset().top-headerHight;
		jQuery("html, body").animate({scrollTop:position}, 550, "swing");
		return false;
	});
	//*ページ外リンクの指定*/      
	var url = jQuery(location).attr('href');
	if (url.indexOf("?id=") == -1) {
		// ほかの処理
	}else{
		var url_sp = url.split("?id=");
		var hash     = '#' + url_sp[url_sp.length - 1];
		var target2	= jQuery(hash);
		var position2	= target2.offset().top-headerHight;
		jQuery("html, body").animate({scrollTop:position2}, 550, "swing");
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.