デモページはこちら

ページ内リンクへの移動をスムーススクロールで実装します。ヘッダーは上部に固定しています。以下のhtml構造でテストします。

<header>
	<button type="button" class="drawer-toggle drawer-hamburger">
		<span class="sr-only">toggle navigation</span>
		<span class="drawer-hamburger-icon"></span>
	</button>
	<nav class="drawer-nav">
		<ul class="drawer-menu">
			<li><a href="index.html">メニュー01</a></li>
			<li><a href="#">メニュー02</a></li>
			<li><a href="#">メニュー03</a></li>
			<li><a href="#">メニュー04</a></li>
			<li><a href="#page01">ページ内リンク</a></li>
		</ul>
	</nav>
	<div class="header_inner">
		<nav class="hamburger_nav">
			<ul>
				<li><a href="index.html">メニュー01</a></li>
				<li><a href="#">メニュー02</a></li>
				<li><a href="#">メニュー03</a></li>
				<li><a href="#">メニュー04</a></li>
				<li><a href="#page01">ページ内リンク</a></li>
			</ul>
		</nav>
	</div>
</header>

ページ内リンクのaタグはhref属性で「#page01」と「index.html#page01」の2パターンが考えられます。#から始まるhref属性のみを対象にするとファイル名を含むパターンが動作しないため、どちらでも動作するようにします。
全てのaタグクリック時の動作から、テレタップとtarget属性のないaタグのみセレクタで除外します。ページ内リンクの判定は、if文のand条件を「URLにhref属性のファイル名を含む」と「href属性に#を含む」にします。href属性にファイル名がないパターンの場合、1つ目のindexOfの検索対象は空白文字になりますが、その場合は-1ではなく0が戻り値となるため、ページ内リンクの条件を満たします。
スクロール位置は固定しているヘッダーの高さを差し引いて設定するのがポイントです。

$(function() {
  $('a:not([href^="tel:"]):not([target])').on('click tap', function(e) {
    var ref = location.href;
    var url = $(this).attr('href');

    if( ref.indexOf(url.replace(/#.*$/, '')) != -1 && url.indexOf('#') != -1 ) {
      var speed = 300;
      var href= url.match(/#.*$/);
      var target = $(href[0]);
      var position = target.offset().top - $('.header_inner').outerHeight();
      $('body, html').animate({ scrollTop: position }, speed, 'swing');
      return false;
    }
  });
});