ハッシュ値がつかない?
|
上記ナポアンさんのコードを、先日実装したコードに当てはめると
/* ナビゲーションバーのからスムーズにスクロールしながら対象位置に移動 */ // 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表示との間にずれが生じてしまう。
ブラウザーの仕様であるかどうかも勉強不足のため、原因・解決方法はわからない。未解決問題がまた増えた。
- 1
- 2