Как избежать добавления идентификатора div в URL при использовании якорных ссылок?

Все ссылки на навигационное меню прокручиваются в разных разделах моего одностраничного сайта. Меню работает нормально, но каждый раз, когда я нажимаю на ссылку меню, идентификатор 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));
Источник

1 ответ

Это в некоторой степени проблема UX, потому что может быть и так, что люди, использующие ваш сайт, на самом деле предпочитают поведение браузера по умолчанию для перехода между различными разделами. Игнорируя это и предполагая, что ваш метод правильный, вы можете достичь желаемого с помощью API pushState. В любом случае, вы, вероятно, захотите сохранить идентификаторы, потому что они позволяют делать глубокие ссылки на конкретный релевантный контент на вашем сайте.

Основная идея заключается в том, что вы перехватываете все ссылки при нажатии на страницу и вместо этого используетеreplaceState перейти к этой ссылке, не влияя на историю просмотров. (какая-то забавная штука, которую я специально включил в эту ссылку для этой ссылки)

Источник
Другие вопросы по тегам