Блог

Как мне сделать, чтобы моя window.history.back() функция в JS не зависела от того, что у href="#" меня есть в моем HTML?

Потому что теперь, когда я впервые нажимаю href="#" на нижнюю часть своей веб-страницы, я возвращаюсь к началу страницы (как это было задумано). Но затем, когда я нажимаю на window.history.back() функцию, я возвращаюсь к href="#" нижней части моей страницы, когда я действительно хочу перейти на предыдущую страницу.

HTML:

 <a href="#">Back to top</a>
 

 <button class="klick" onclick="goBack()">Back</button>
 

JS:

 function goBack() {window.history.back();}
 

Благодарен за помощь.

С наилучшими пожеланиями Jelly

Вы можете заменить текущее местоположение, не добавляя новое состояние в историю сеансов. Вы можете сделать это с помощью метода location.replace, как показано ниже. (В качестве альтернативы вы можете использовать history.replaceState .)

 <a class="toTop" href="#">Back to top</a>

document.addEventListener("click", goToTop);
function goToTop(event){
  if(event.target.classList.contains("toTop")){ // Will work for multiple `.toTop` elements
    event.preventDefault(); // Because this is an anchor element w/ href attribute
    location.replace(location.href); // Navigates without updating history
  }
}
 

Я думаю, что самым простым решением было бы сделать так, чтобы нажатие на пустой якорь фактически ничего не добавляло в историю, а просто заменяло текущую запись:

 document.querySelectorAll('a[href="#"]').forEach((link) => {
    link.addEventListener('click', function(event) {
        window.location.replace("#");
        event.preventDefault();
    });
});
 

В качестве альтернативы, поскольку нажатие на привязку фактически не перезагружает страницу, вы можете просто отследить, сколько раз хэш менялся, и вернуться к этой сумме:

 let goBackCount = -1;
let goBack = () => {
    window.history.go(goBackCount);
});
window.addEventListener('hashchange', () => {
    goBackCount--;
});