web-dev-qa-db-ja.com

ページの読み込み後にハッシュタグに移動するにはどうすればよいですか？

今まで見つけてきたのとは逆のことをしたいです。 jsで多くの高さを設定していて、ページが読み込まれた後、URLのハッシュタグに移動したいと思います。これは簡単だと思いますが、明白な答えが見当たりません...例として、ここをチェックしてください...

http://alavita.rizenclients.com/#story

コードを使用してこれを試みました...

$(window).load(function() {
    var hashTag = window.location.hash;
    window.location = '/' + hashTag;
});

タグ付けされたセクションの一番上に実際に連れて行ってくれません...

javascripthashtag
13
brunam

ページの読み込み後にハッシュを変更したいだけの場合：

_window.onload = function (event) {
    window.location.hash = "#my-new-hash";
};
_

新しいハッシュを使用してURLに移動する場合：

_window.location.href = "http://website.com/#my-new-hash";
_

URLのハッシュの変更をリッスンしたい場合; window.onhashchange DOMイベントの使用を検討できます。

_window.onhashchange = function () {
    if (location.hash === "#expected-hash") {
        doSomething();
    }
};
_

ただし、まだすべての主要なブラウザでサポートされているわけではありません。 ワイド ブラウザサポート になりました。 _window.location.hash_を小さな間隔でポーリングして変更を確認することもできますが、これもあまり効率的ではありません。

クロスブラウザソリューション; Ben AlmanのjQuery hashchangeプラグイン これらのメソッドと他のいくつかのメソッドをフォールバックメカニズムと組み合わせることをお勧めします。

編集：質問の更新後、ページをブックマークにスクロールする必要があることを理解していますか？：

_Element.scrollTop_またはjQueryの$.scrollTop()メソッドを使用できます。

_$(document).ready(function (event) {
    var yOffset = $("#my-element").offset().top;
    $("body").scrollTop(yOffset);
});
_

ドキュメントを参照してください ここ 。

28
Onur Yıldırım

何らかの理由で、MS Edge42とIE 11の両方が、新しいブックマークを設定した後にwindow.location.reload(true)を実行しても、新しいブックマークにスクロールしません。このソリューションの場合：ロードするページにこのスクリプトを挿入します（jqueryが必要です）

$(document).ready(function() {
 var hash = window.location.hash;
 if (hash) {
  var elem = document.getElementById(hash.substring(1));
  if (elem) {
   elem.scrollIntoView();
  }
 }
});
1
Rudiger W.

あなたはあなたの質問を変えました。

このソリューションをチェックしてください。 https://stackoverflow.com/a/2162174/97386 これで、何が起こっているのか、クロスブラウザソリューションを実装する方法を理解できます。

注意：下部に、必要なことを実行するjqueryプラグインについて言及しています。

http://benalman.com/projects/jquery-hashchange-plugin/

このプラグインを使用すると、このようなことができます。これは現在のページで機能します。ただし、より堅牢になるように変更することをお勧めします。

$(function(){

    // Bind the event.
    $(window).hashchange( function(){
        // get the hash
        var hash = window.location.hash;
        // click for your animation
        $('a[href=' + hash + ']').click();
    })

    // Trigger the event (useful on page load).
    $(window).hashchange();

});
0
mwoods79

現在の場所を設定するだけです。

window.location = 'http://alavita.rizenclients.com/#story';

または、ハッシュを設定して（まだ設定されていない場合）、リロードします。

window.location.hash = hashTag;
window.location=window.location.href;
0
Justin Bicknell