Question

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

Answer 1

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

基本思路是在页面上点击时拦截所有链接，而是使用replaceState导航到该链接而不影响浏览历史记录。（那里的一些有趣的东西，我故意包括该链接的url哈希）

使用锚链接时如何避免向URL添加div id？

1 个答案: