ハッシュ値がつかない？

ポートフォリオサイト完成と決めた期限までいよいよ大詰めだが、根本的な問題にぶち当たった。
ページ内リンクで飛んでサイト内を移動したら、URLに#xxx とハッシュ値がつくはずなのに、どこへ飛んでもURLが変わらない。アドレスバーが不変のままで奇怪なので調べてみたら、今の悩みにピッタリの記事を見つけた。

どうやらjQueryでスムーズスクロールさせたら、ハッシュ値がつかないらしい。

ブログを書いたナポアンさんのコードはこちら。

smoothScrollWithHash.js
/* ページ内ジャンプをクリックした際の滑らかスクロール */
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
console.log(target);
$("html, body").animate({scrollTop:position}, speed, "swing");
var scrollTargetId = target.attr("id");
setTimeout(function(){
location.hash = scrollTargetId;
return false;
},500);
});
});

スムーズスクロール実装のスクリプトに、下記コードを追記する必要がある。

var scrollTargetId = target.attr("id");

▲ここで、「target」に入ってるジャンプ先オブジェクトのidを取得。

location.hash = scrollTargetId;

▲0.5秒遅れてハッシュをアドレスバーに追記。
送らせて実行しないと、アニメーションより先に変な動きが入ってしまう。