Якорные ссылки в меню сайта

Не так давно мы разместили статью про якорные ссылки, как сделать чтобы при переходе по таким ссылкам открывались табы или спойлеры, но в рамках текущей страницы.

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

Вот как это может выглядеть:

Здеcь в наш код добавляется отслеживание события поменялся ли хэш префикс url адреса (то, что после символа #)

//код для перехода по якорным ссылкам других страниц
let anchor = window.location.hash;
let targetId = anchor.slice(1);
let targetButton = document.getElementById(targetId);
setTimeout(function() {
targetButton.click();
targetContent.scrollIntoView({
behavior: "smooth",
block: "start"
});
}, 1000); 
//код для перехода по якорным ссылкам, текущей страницы
window.addEventListener('hashchange', hashchange);
function hashchange(){ 
let anchor = window.location.hash;
let targetId = anchor.slice(1);
let targetButton = document.getElementById(targetId);
setTimeout(function() {
targetButton.click();
targetContent.scrollIntoView({
behavior: "smooth",
block: "start"
});
}, 1000);
};