How to avoid adding a div id to URL when using anchor links?

Question

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

score 0 · Answer 1 · answered Jun 17 '17 at 20:43

This is a bit of a UX issue because it might be true that people using your site actually prefer the default behavior of the browser to go back between the various sections. Ignoring that and assuming your method is correct, you can achieve what you want using the pushState api. In any case, you probably want to keep the ids there because they allow deep linking to specific relevant content on your site.

The basic idea is you intercept all the links when clicked on the page, and instead use replaceState to navigate to that link without affecting the browsing history. (some funnery there that I purposefully included that url hash for that link)

I agree with the UX aspect you've mentioned but I want to be able to test my approach to decide what will I do based on those results. Thanks — rolando.pdl, Jun 17 '17 at 21:02

How to avoid adding a div id to URL when using anchor links?

1 Answers1