使用锚链接时如何避免在 URL 中添加 div id？答案

【问题标题】：How to avoid adding a div id to URL when using anchor links?使用锚链接时如何避免在 URL 中添加 div id？
【发布时间】：2017-06-17 20:36:55
【问题描述】：

我所有的导航菜单链接都滚动到我的一页网站的不同部分。菜单工作正常，但每次我单击菜单链接时，部分 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));

【问题讨论】：

标签： javascript jquery menu anchor onepage-scroll

【解决方案1】：

这是一个 UX 问题，因为使用您网站的人可能确实更喜欢浏览器的默认行为在各个部分之间返回。忽略这一点并假设您的方法是正确的，您可以使用pushState api 实现您想要的。在任何情况下，您都可能希望保留这些 ID，因为它们允许深度链接到您网站上的特定相关内容。

基本思想是在点击页面时拦截所有链接，并使用replaceState 导航到该链接而不影响浏览历史记录。（有趣的是，我特意包含了那个链接的 url 哈希）

【讨论】：

我同意你提到的用户体验方面，但我希望能够测试我的方法，以根据这些结果决定我将做什么。谢谢