jquery - URLからハッシュタグを削除しますが、それでも要素にジャンプします

Question

これが私の苦境です。あるページから別のページに移動し、訪問者をそれぞれのDIVIDに誘導する3つのリンクがあります。

www.mysite.com/#about
www.mysite.com/#gallery
www.mysite.com/#help

正常に動作していますが、URLから末尾のハッシュタグを削除する必要があります。そうしないと、jqueryギャラリースライダーが混乱します。これは可能ですか？他の人が同様の質問をしているのを見たことがありますが、彼らは新しいページに移動していないようです。

私が探しているのは、訪問者がリンク（たとえばwww.mysite.com/#about）をクリックしてそのページ（およびそれぞれの要素）に移動する方法ですが、ブラウザーを削除して#aboutレポートするだけwww.mysite.comです。

Jquery、PHP、javascript、私は本当に何を気にしません。

別の方法として、ユーザーをwww.mysite.comに移動し、後でハッシュタグを適用することも考えていました。これは可能ですか？ちょうどそのようにそれらは要素に連れて行かれますが、ブラウザのURLはハッシュタグを反映していません。

PS：私はコーダーではないので、これを実行できるコードが少しある場合、実装方法を本当に明確にできますか？

どうもありがとう。

Answer 1

を使用できますhistory api。

まず、スタックに状態があるかどうかを確認します。状態が何であれ、スタックにプッシュした最新のアイテムになります。

id要素の は と同じであると仮定しhashます。これをセレクターとして使用し、divその divs を取得しoffset().topます。

if(history.state){  
    $('html, body').scrollTop($('div[id='+history.state.element+']').offset().top); 
}

それでは、クリック機能を見てみましょう。デフォルトの動作を防ぎ、href を変数に格納します (数回使用するため)。状態をスタックにプッシュします。elementキーの値はですwhatever comes after the hash tag。また、スタック状態に関するその他の情報も提供します。without完了したら、ページの場所を要素の場所のハッシュ タグ にリダイレクトするだけです。

$('a').on('click', function(e){
    e.preventDefault();

    var ele =  $(this).prop('href');
    window.history.pushState({'element' : ele.split('#')[1]}, ele, ele.split('#')[0]);

    window.location = ele.split('#')[0]; 
});

次のページが読み込まれると、履歴には最新のプッシュされたスタックの状態があります。これにより、必要な動作がエミュレートされます。

Answer 2

これは jQuery の優れたソリューションです。

http://demos.flesler.com/jquery/scrollTo/