如何避免在使用錨鏈接時將div ID添加到URL？

我所有的導航菜單鏈接都滾動到我的一個頁面網站的不同部分。菜單工作正常，但每次點擊菜單鏈接時，節ID都會添加到URL中。我遇到的問題是，當我點擊瀏覽器的後退按鈕時，我會回到同一頁的前一部分。如何避免在使用錨鏈接時將div ID添加到URL？

我想要後退按鈕帶我到前一頁/網站我正在打開，而不是回到我已經在同一頁的部分（這是非常煩人的）。我使用這個purecss.io菜單模板作爲基礎https://purecss.io/layouts/side-menu/
請參閱下面的代碼。

任何幫助將不勝感激。謝謝。

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保留在那裏，因爲它們允許深層鏈接到您網站上的特定相關內容。

基本思想是在頁面上單擊時攔截所有鏈接，而不是使用replaceState導航到該鏈接而不影響瀏覽歷史。（我在那裏有意識地包含了該鏈接的URL哈希）

來源

2017-06-17 20:43:45

我同意你提到的UX方面，但我希望能夠測試我的方法來根據這些結果決定我會做什麼。謝謝 –

聽起來像是一個不錯的選擇 –

如何避免在使用錨鏈接時將div ID添加到URL？

回答

相關問題