別のページからの遷移後に表示されるURLからアンカータグ（＃）を消したい

Question

前提・実現したいこと

WordPressで各投稿ページを「http://○○.jp/カテゴリ/投稿.html」となるように設定しています。
コメントとトラックバックはタブで切り替えて表示するようにしました。コメント（#commentsBody）トラックバック（#trackbacksBody)にはそれぞれアンカーリンクでアクセスすることができます。
ページ内はスムーズスクロールで移動するようにプログラムしています。スムーズスクロールはhrefが“#”で始まるaタグをクリックすると発動し、実行後は[return false;]でaタグの機能を無効化するようにしました。
コメントとトラックバックをタブ切り替えにしていることから別ページから非表示になっているタブに
アクセスする際にエラーを起こさないよう、別のプログラムも設置しました。

最終的には、コメント/トラックバックにアクセスする際にもブラウザのURL欄にはアンカータグのついていない状態のアドレスを表示しておきたいと考えております。

投稿ページ内からはコメント/トラックバックに問題なくスムーズスクロールで移動し、移動後もURLにアンカータグが付くことはありません。希望通りの動作をしており特に問題は起きていません。

発生している問題・エラーメッセージ

問題は別のページからコメント/トラックバックに移動する時に発生します。
記事一覧ページやサイドバーからコメントへのリンクをクリックすると該当ページには遷移しますが、その後コメント/トラックバックへは移動してくれません。

該当のソースコード

jQuery(document).ready(function($){
	//URLアンカーを取得してタブ切り替え後に移動
	$('a.tabChack').click(function(e){
		//URLを変数に代入
		var urlName = $(this).attr("href");
		//aタグの機能を無効化
		e.preventDefault();
		//表示したいURLでページ遷移
		location.href = urlName.replace(/#.*/, "");
		//アンカータグを取得してハッシュを追加（urlHash[1]に収納）
		var urlHash = urlName.split('#');
		urlHash[1] = "#"+urlHash[1];
		//タブ切り替え後にスムーズスクロール移動
		var tab = document.getElementsByName( "tabNav" ) ;
		if(urlHash[1]=="commentsBody") tab[0].checked = true;
		else if(urlHash[1]=="trackbacksBody") tab[1].checked = true;
		var target = $(urlHash[1]).offset().top;
		$('html,body').animate({scrollTop : target}, 700, 'swing');
	});
});

試したこと

ページ遷移完了しないうちに次のプログラムを実行してしまっているため、タブ切り替え後のスムーズスクロールができないのではないかと思い、下記のプログラムも試してみたのですが、今度はページ遷移→コメント/トラックバックまでスムーズスクロール→画面再表示により一番上まで戻ってしまいます。

jQuery(document).ready(function($){
	var urlHash = location.hash;
	var tab = document.getElementsByName( "tabNav" ) ;
	if(urlHash){
		if(urlHash=="#commentsBody") tab[0].checked = true;
		else if(urlHash=="#trackbacksBody") tab[1].checked = true;
		var target = $(urlHash).offset().top;
		$('html,body').animate({scrollTop : target}, 700, 'swing');
		location.href = location.href.replace(/#.*/, "");
	}
});

何か解決方法はありませんでしょうか？

Answer 1

自己解決できましたので、ご報告させて頂きます。

2番目に試したプログラムの一番下「location.href = location.href.replace(/#.*/, "");」の部分を「history.replaceState(null, null, location.pathname.split('/').pop());」と書き換えたところ、思い通りの動作となりました。

ページを再読み込みすることなく、ブラウザのアドレスバーを書き換える方法を見つけることが出来ましたので試してみました。