28

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

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

この動作は可能ですか？

4

6 に答える 6

57

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

于 2014-03-03T12:04:45.000 に答える
30

できるだけ簡単に

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
于 2010-06-14T23:19:37.680 に答える
22

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

function changeHashWithoutScrolling(hash) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}
于 2010-04-08T07:14:29.877 に答える
2

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

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

于 2009-03-14T02:33:26.263 に答える
2

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

素晴らしい解決策ですが、 $('html').scrollTop() は常に 0 を返すため、Chrome では機能しませんでした。マイナーな編集で問題が解決します。

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
于 2016-01-05T23:29:05.347 に答える
2

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;
            }
        }
    }
于 2016-06-03T11:27:40.153 に答える