0

All of my nav menu links scroll to different sections of my one page site. The menu works fine but every time I click on a menu link the section id gets added to the URL. The issue I'm having is that when I click on the browser's back button it takes me back to the previous section of the same page.

I want the back button to take me to the previous page/website I was on instead of going back to sections of the same page I'm already in (which is very annoying). I'm using this purecss.io menu template as the base https://purecss.io/layouts/side-menu/
See code below.

Any help will be appreciated. Thanks.

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));
4

1 回答 1

0

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

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

于 2017-06-17T20:43:45.683 回答