web-dev-qa-db-ja.com

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

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

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

この動作は可能ですか？

javascriptbrowser-historyback-buttondeep-linking
26
Jonathon Watney

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

本当に単純な履歴： http://code.google.com/p/reallysimplehistory/ SWFAddress： http://www.asual.com/swfaddress/

2
Willem

ページをリロード/スクロールせずにハッシュを変更するには、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である可能性があるため、ハッシュに限定されないことに注意してください。

36
Luca Reghellin

それが得るのと同じくらい簡単

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

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

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

Sunnyからの回答に基づいて、未定義およびnullを回避するこの関数を作成しました。

    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;
            }
        }
    }
2
tobias47n9e

キャサリンの回答にコメントを追加したかったのですが、まだ担当者がいません-

素晴らしい解決策ですが、Chrome as $（ 'html'）。scrollTop（）は常に0を返すため、私にとっては機能しませんでした-マイナーな編集で問題が解決します：

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