1. TOP
  2. web
  3. javascript
  4. ハッシュ値がつかない?

ハッシュ値がつかない?

|

上記ナポアンさんのコードを、先日実装したコードに当てはめると

/* ナビゲーションバーのからスムーズにスクロールしながら対象位置に移動 */
// li.dropdown要素配下のa要素は対象から外しておく
$(".navbar a").not(".dropdown a").click(function () {
var destination = $(this).attr("href");
var target = $(destination == "#" || destination == "" ? 'html' : destination);

$("html, body").animate({
scrollTop: $(destination).offset().top,
}, 400);

// targetに入っているジャンプ先オブジェクトのidを取得
var scrollTargetId = target.attr("id");

// ハッシュをURLに追記
// アニメーションより先に変な動きを入れないため、0.4秒遅らせる
setTimeout(function() {
location.hash = scrollTargetId;
// return false;
},400);
// 本来のクリックイベントは処理しない
return false;
});

飛んだ先のidが、しっかりとハッシュ値になってURLにくっつくようになった。当たり前の挙動が気持ちいい!

「戻る」ボタンの挙動

しかし、ブラウザの「戻る」ボタンの挙動がおかしい事に気がついた。chrome, firefox, safari, edge いずれも、「戻る」ボタンで移動すると、実際の表示とURL表示との間にずれが生じてしまう。
ブラウザーの仕様であるかどうかも勉強不足のため、原因・解決方法はわからない。未解決問題がまた増えた。