ロングページのユーザビリティを手軽に向上してくれるページ内リンク（目次やTOPへ戻るetc.）は便利なものですが、常に気なっているというか、気持ち悪いなーと思っていた点がありました。それは…

#リンクをクリックした直後 、URLが変わってしまうこと

です。なんだそんなこと？…と思われた方はスルーして下さい。
とりあえず、今回はページ内リンクをスムーズスクロールしつつ、URLに「＃」が付かないスクリプトを見付けたので備忘録としてメモ。
この事象に対応するスクリプトは探せば色んなものがありますし、個人的にも色々試してみましたが、どのようなページであっても概ね問題なく機能するのが以下の方法です。

準備

jQueryを使用するため、ページ内に以下コードを追加。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

バージョンを間違えたりすると、動かない場合があるので注意です。

スクリプト設置

記述したjQueryファイル読み込み記述後に、以下スクリプトを記述。

<script type="text/javascript">
 $('a[href^="#"]').click(function(){
   var speed = 500;　//スクロールスピード
   var href= $(this).attr("href");
   var target = $(href == "#" || href == "" ? 'html' : href);
   var position = target.offset().top;
   $("html, body").animate({scrollTop:position}, speed, "swing");
   return false;
 });
</script>

※上記記事を参考にさせて頂きました

以下の方法もあります。こちらはjquery不要で、ページ内リンクと同時にヘッダの高さ分位置調整まで出来ちゃいます！

<script>
    $(document).ready(function(e) {
       var headerHight = 80;　//ヘッダ高さ
       $('a[data-area]').click(function() {
           var href = '#' + $(this).attr("data-area");
           var target = $(href == "#" || href == "" ? 'html' : href);
           console.log(target);
           var position = target.offset().top - headerHight;
           $("html, body").animate({
               scrollTop: position
           }, 550, "swing");
           return false;
       });
   });
</script>

この方法の場合、ページ内リンクの貼り方はhrefではなくdataになります。

<ul>
<li ><a data-area="area01">メニュー1</a></li>
<li ><a data-area="area02">メニュー2</a></li>
<li ><a data-area="area03">メニュー1</a></li>
</ul>

ただし、マウスオーバーした際にリンクカーソルじゃなくなってしまう点だけ注意が必要です。