<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{
  width:140px;
  heiht:30px;
  position:fixed;
  right:0;
  bottom:0;
}
.pagetop a{
  padding:15px;
  display:block;
  text-decoration:none;
  font-size:12px;
  background:#000;
  color:#fff;
}
jQuery(function(jQuery){
jQuery(".pagetop").hide();
    jQuery('body').append(
        jQuery('<div class=".pagetop">')
        .append(
            jQuery('<a href="#page"> </a>')
            .click(function(){jQuery('html,body').animate({ scrollTop:0}, 'fast'); return false})
            )
        );
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 200) {
            jQuery('.pagetop').fadeIn();
        } else {
            jQuery('.pagetop').fadeOut();
        }
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.