<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="header">
	ヘッダー
</div>
<div id="contents">
  <a href="#page-link1">ページ内リンク</a>
	<div id="page-link1">
    <div class="box">コンテンツ部分</div>
	</div>
  <a href="example.html#page-link" class="events">ページ外リンク</a>
	<div id="page-link2">
    <div class="box">コンテンツ部分</div>
	</div>
</div>
/* リセット */
*{
  padding:0;
  margin:0;
}

/* 今回の指定 */
#header {
	width: 100%;
	height: 30px;
	position: fixed;
	left:0;
	top:0;
	z-index: 10;
	background:#ccc;
  padding:10px;
}
#contents {
	padding-top: 50px;
}
#contents a{
  display:block;
  background:#fff;
  color:#333;
  padding:10px;
}
#contents a.events{
  pointer-events: none;
  /* 説明上、ページ外リンクを無効にしています
  　　コピーして使用する際は、ここの指定は不要です */
}
#page-link1 .box,
#page-link2 .box{
  height:200px;
  background:#333;
  color:#fff;
  padding:10px;
}
// ページ内リンク
$(function () {
	var headerHight = 50; //ヘッダの高さ
	$('a[href^=#]').click(function(){
	var href= $(this).attr("href");
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top-headerHight; 
	$("html, body").animate({scrollTop:position}, 550, "swing");
	return false;
  });
});


// ページ外リンク
$(window).on('load', function() {
	  var headerHight = 50; //ヘッダの高さ
	  if(document.URL.match("#")) {
	  var str = location.href ;
	  var cut_str = "#";
	  var index = str.indexOf(cut_str);
	  var href = str.slice(index);
	  var target = href;
	  var position = $(target).offset().top - headerHight;
	  $("html, body").scrollTop(position);
	  return false;
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.