Webページをスクロールせずにwindow.location.hashを更新できますか？

Question

JavaScriptを使用して、Webページをスクロールせずにwindow.location.hashを更新する方法はありますか？

クリック可能なタイトル要素があり、その下にあるdivの可視性を切り替えます。タイトルをクリックしたときに履歴に/ foo＃barが必要ですが、ページをスクロールさせたくありません。したがって、/ foo＃barから離れて移動する場合、戻るボタンを使用して、window.location.hashにIDが含まれるdivを返すときに表示できます。

この動作は可能ですか？

Answer 1

この動作は非常に可能です。この機能を提供するために開発されたライブラリのいくつかを調べる必要があります。

本当にシンプルな歴史： http://code.google.com/p/reallysimplehistory/ SWFAddress： http://www.asual.com/swfaddress/

Answer 2

ページをリロード/スクロールせずにハッシュを変更するには、単にhtml5 history.pushState を使用できます。

history.pushState(null,null,'#hashexample');

すべての主要ブラウザでサポートされています：

http://caniuse.com/history

MDN：

https： //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method

また、ここで使用している最後のurlパラメータは任意のURLであるため、ハッシュに限定されないことに注意してください。

Answer 3

できるだけ簡単に

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Answer 4

もう1つ試すことができるのは、ハッシュが一時的に指す要素のIDを変更することです。私のために働いた！

function changeHashWithoutScrolling(hash) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}

Answer 5

キャサリンの回答にコメントを追加したいが、まだ担当者がいない-

ただし、Chromeでは$（ 'html'）。scrollTop（）が常に0を返すため、うまくいきませんでした。小さな編集で問題が解決します。

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Answer 6

サニーからの答えに基づいて、未定義およびヌルを回避するこの関数を作成しました：

    function changeHashWithoutScrolling(hash) {
        var id;
        var elem;

        id = hash.replace(/^.*#/, '');

        if (id) {
            elem = document.getElementById(id);

            if (elem) {
                elem.id = id + '-tmp';
                window.location.hash = hash;
                elem.id = id;
            }
        }
    }