ページの横にアンカーを付けるにはどうすればいいですか？

Question

これら2つのリンクに基づいて http://www.cincinnatiburgerweek.com/

http://www.cincinnatiburgerweek.com/#!drakes/oot2t

、どのようにあなたのメインページを持つことができますし、レストランでクリックしたとき、それは別のURLではないでしょうか？代わりに、メインページの右側にアンカーリンクがあります。このアンカーの位置を右にしてブラウザの幅に合わせてメインページを表示させるには、cssを使用するとどうなりますか？

Answer 1

あなたはSingle Page Applications (SPA)を探しています。位置ハッシュ に使用することができる

ページ アプリケーション内の別の論理ページの知覚及び航行を提供し、プロセスの任意の時点でリロードし、また別のページへの制御 転送をしません、 HTML5のpushState（）APIと同じように。

あなたの質問に答えるために、基本的には、手順は次のとおりです。

1. 防ぎページのリダイレクト。
2. ブラウザの状態を更新します（新しいページをシミュレートします）。
3. 関連コンテンツを動的に読み込みます。表面的に

、のようにする必要があります：

var linkAbout = document.querySelector('a[href="/about"]'); 

linkAbout.addEventListener('click', function (e) { 
    // Prevent page redirect. 
    e.preventDefault(); 
    // Update browser state. 
    var stateObj = { foo: "bar" }; 
    history.pushState(stateObj, 'About page', '/about'); 
    // Dynamically load the related content. 
    // Here you will need to send some asynchronous (ajax) request 
    // to the server, get the content and put it on the current page. 
    var container = document.querySelector('#container'); 
    var content = getContent('/about'); 
    container.innerHTML = content; 
}); 

明らかにこれは概要であり、ここでは言及されなかった。このアプローチについての多くのものがあります。

この近代的なアプローチを使用すると、Webアプリケーションを構築するのに役立つライブラリやフレームワークが多数見つかります。

Answer 2

基本的に、彼らはJavaScriptを使用している...

• この場合のデータ属性で開催された（つまり#IDセレクタで要素を探し
• [などに触れ、クリック]イベントをキャプチャ、ちょうどHREFで#IDを置くと比較して）滑らか
• ... 0123ページ（その#IDセレクタを持つ要素）

上のその場所に簡単な例を移行ページ上の位置に関する

https://css-tricks.com/snippets/jquery/smooth-scrolling/

、彼らは、通常の文書の流れから要素を除去し、窓（ビューポート）に対して、それを位置決めfixed位置決めを使用しています。彼らはそれを垂直にいくつかの電話absolute centeringを中心に便利な小さなトリックを使用しています。