上部に固定表示がある場合にページ内スクロールがずれてしまうので、JSでスクロール位置を調整しています。
href=”#”の時はページトップにスクロールします。

DEMO

position: fixed;を使用しているため、別ページにDEMOを用意しました。

DEMOを確認する

HTML

<div class="nav">
	固定ヘッダー
</div>
<div class="contents">
	<ul>
		<li><a href="#title1">タイトル1</a></li>
		<li><a href="#title2">タイトル2</a></li>
	</ul>
	<div class="title" id="title1">タイトル1</div>
	<div class="title" id="title2">タイトル2</div>
	<ul>
		<li><a href="#title1">タイトル1</a></li>
		<li><a href="#title2">タイトル2</a></li>
		<li><a href="#">ページトップへ戻る</a></li>
	</ul>
</div>

CSS

スクロール動作をわかりやすくするための装飾です。
好きにアレンジしてください。

.nav {
	background: #333;
	background: rgba(51,51,51,.9);
	color: #fff;
	padding: 10px;
	position: fixed;
	top: 0;
	width: 100%;
}
.title {
	height: 1000px;
}

JS

JSの記述の前にjQueryの読み込みが必要です。

jQuery(function($){
	var headerHeight =  $('.nav').outerHeight();
	$('.contents').css('margin-top', headerHeight);

	$('a[href^="#"]').on('click', function() {
		var href = $(this).attr('href'),
		target = (href == '#' || href == '') ? 0 : $(href).offset().top - headerHeight;
		$('html, body').animate({scrollTop:target}, 500, 'swing');
		return false;
	});
});