アンカーリンクの使用時にURLにdiv idを追加しないようにするにはどうすればよいですか？

私のナビゲーションメニューのすべてのリンクは、私の1つのページサイトの異なるセクションにスクロールします。メニューは正常に機能しますが、メニューリンクをクリックするたびにセクションIDがURLに追加されます。私が抱えている問題は、ブラウザの戻るボタンをクリックすると、同じページの前のセクションに戻るということです。アンカーリンクの使用時にURLにdiv idを追加しないようにするにはどうすればよいですか？

私はバックボタンは、私が代わりに戻って（非常に迷惑である）私はすでによ同じページのセクションへ行くのにあった前ページ/ウェブサイトに私を取ることにしたいです。私はhttps://purecss.io/layouts/side-menu/
を参照してくださいコード下のベースとしてこのpurecss.ioメニューテンプレートを使用しています。

ご協力いただければ幸いです。ありがとう。

The HTML 

<body> 
<div id="layout"> 
    <nav id="menu"> 
     <div class="pure-menu"> 
      <ul class="pure-menu-list"> 
       <li id="navIntro" class="pure-menu-item"><a href="#intro" class="smoothscroll pure-menu-link">Home</a></li> 
       <li id="navAbout" class="pure-menu-item"><a href="#about" class="smoothscroll pure-menu-link">About</a></li> 

       <li id="navWork" class="pure-menu-item"> 
        <a href="#work" class="smoothscroll pure-menu-link">work</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 

    <section id="intro" class="intro"> 
     <h1 class="animate-intro">some text</h1> 
    </section/> 

    <section id="about" class="about"> 
    </section/> 

    <section id="work" class="work"> 
    </section/> 

</div>

The JQuery 

(function (window, document) { 

var layout = document.getElementById('layout'), 
    menu  = document.getElementById('menu'), 
    menuLink = document.getElementById('menuLink'), 
    content = document.getElementById('main'); 

function toggleClass(element, className) { 
    var classes = element.className.split(/\s+/), 
     length = classes.length, 
     i = 0; 

    for(; i < length; i++) { 
     if (classes[i] === className) { 
     classes.splice(i, 1); 
     break; 
     } 
    } 
    // The className is not found 
    if (length === classes.length) { 
     classes.push(className); 
    } 

    element.className = classes.join(' '); 
} 

function toggleAll(e) { 
    var active = 'active'; 

    e.preventDefault(); 
    toggleClass(layout, active); 
    toggleClass(menu, active); 
    toggleClass(menuLink, active); 
} 

menuLink.onclick = function (e) { 
    toggleAll(e); 
}; 
navIntro.onclick = function (e) { 
    toggleAll(e); 
}; 

navAbout.onclick = function (e) { 
    toggleAll(e); 
}; 
navWork.onclick = function (e) { 
    toggleAll(e); 
}; 
navJourney.onclick = function (e) { 
    toggleAll(e); 
}; 
navContact.onclick = function (e) { 
    toggleAll(e); 
}; 

// content.onclick = function(e) { 
//  if (menu.className.indexOf('active') !== -1) { 
//   toggleAll(e); 
//  } 
// }; 

}(this, this.document));

出典

2017-06-17 rolando.pdl

あなたのサイトを利用して、人々が実際に戻って、さまざまなセクション間行くために、ブラウザのデフォルトの動作を好むというのは本当かもしれないので、これはUXの問題のビットです。それを無視して、あなたの方法が正しいと仮定すると、あなたがpushState APIを使用して欲しいものを達成することができます。いずれにしても、IDはサイトの特定の関連コンテンツに深くリンクできるため、おそらくIDを保持したいと考えています。

基本的な考え方は、ページ上をクリックするとすべてのリンクを傍受し、代わりにreplaceStateを使用して、閲覧履歴に影響を与えずにそのリンクに移動することです。（私は意図的にそのリンクのためにそのURLのハッシュが含まれていることがいくつかfunnery）

出典

2017-06-17 20:43:45

は、私はあなたが言及したUXの側面に同意するが、私はそれらの結果に基づいて何をするかを決めるために私のアプローチをテストできるようにしたいです。ありがとう –

良い選択のような音 –

アンカーリンクの使用時にURLにdiv idを追加しないようにするにはどうすればよいですか？

答えて

関連する問題