Webアプリケーションのブラウザの戻るボタンの動作を変更しますか？

Question

私は「app like」のWebページを作っています。実際のページはオーバーフローが隠されているブラウザのビューポートよりも広いです。異なるリンクをクリックすると、CSSが異なるセクションにアニメートされます。ここでは非常に簡単なデモです： http://smartpeopletalkfast.co.uk/pos/

この段階では、デモではなく実稼働サイトで作業しています。私はブラウザの戻るボタンを横取りしたいので、セクションに移動した場合は、Webページを終了するのではなく、前のセクションに戻ります。完璧な世界では、これはセクションにナビゲートするために使用された同じアニメーションで起こります。

これを達成できますか？リサーチから、デフォルトブラウザの戻るボタンを傍受して無効にすることはできないと思います。

私は、このサイトのブラウザの戻るボタンを無効にすることに関する多くの記事を知っています。通常、応答はDONTです！しかし、私のページの別のセクションに行くのは別のページに移動するようなものなので、私は達成しようとしているものがユーザーの期待に応えていると思います。

AJAXベースのアプリケーションでは、HTML5の履歴APIを使用しているようです。私が理解しているように、ブラウザの履歴にフラグメントを含むURLを追加する必要があります（mysite.com＃section2など）。しかし、水平スクロールは、垂直スクロールのようなフラグメントリンクに基づいていないので、これは私にとってはうまくいくとは思わない。たぶん私は URLが＃section2のような断片で終わるときを検出するためにJavaScriptを使用し、CSSを変更して2番目のセクションがビューポートにあるようにすることができますか？私はこれにアニメーション化する方法がないだろうと思いますか？

Answer 1

ナビゲーションボタン（ページ上）をクリックすると、HTMLアンカータグを使用できます。したがって、アンカーが位置する場所（上、左）にスクロールします。この動作により、ブラウザの戻るボタンと進むボタンがアンカーにナビゲートされます。

例えばこれらを取る：

• http://smartpeopletalkfast.co.uk/pos/#filters
• http://smartpeopletalkfast.co.uk/pos/#map

コードボタンのために：

<a href="#filters">Filters &lt;</a> 
<a href="#map">Map &gt;</a> 

をちょうどあなたのページの前後のボタンのアンカーを変更ユーザーがナビゲートしている場所に対応するため〜に向かって。これにより、ブラウザはユーザが自分のページ上のどこにいるかを追跡します。

ハッシュタグを機能させるために実際のアンカーリンクを追加しない場合でも、javacriptのwindow.location.hashプロパティを使用して、ユーザー自身でナビゲートできます。

Answer 2

ブラウザの[戻る]ボタンのネイティブ動作を変更するというアイデアは、間違って近づいていることを示す赤い旗であり、本当にクロスブラウザではありません。

私はunloadeventを処理して、状態間のスムーズな移行を試みます。

Answer 3

私はGabeに同意すると、戻るボタンの動作を変更しようとするとが通常赤い旗です。しかし、あなたがしようとしていることを読んだ後、私は問題を見ません。（それは、あなたが戻るボタンがそれをナビゲートできるように、ブラウザの履歴に状態を追加しようとしているあなたは本当に変更バックボタンの動作しようとしていない–用語のことかもしれません。）

ますURLのハッシュ（#の後の部分）の状態を管理するjQuery BBQを使用します。 hashchangeイベントを監視し、それに応じてパネルの間にアニメーション化：

$(window).on('hashchange', function() { 
    var page = $.bbq.getState('page'); 
    // animate to `page` 
}); 

さて、あなたもそれをリンクするあなたの次のページボタン–にイベントハンドラを添付する必要はありません。

<a href="#page=map">Map</a>