Блог

Как поймать момент, когда пользователь нажимает на ссылку, которая имеет хэш, направляющий внутри той же страницы, которая уже открыта (и никакой навигации между страницами не происходит)? hashchange Событие есть, но оно не сработает, если хэш уже установлен и в нем нет никаких изменений. Браузер будет прокручивать страницу до привязки независимо от того, изменился хэш или нет.

 http://example.org/#my-hash
 

Пример использования, когда мне это нужно: страница имеет небольшой блок «Содержимое» в начале, и пользователь может щелкнуть там элемент, затем вернуться к началу и снова щелкнуть тот же элемент. Я хочу выделить раздел, по которому перемещается пользователь.

просто получите элемент с помощью querySelector, затем запустите событие onclick

 window.onload = function() {
var tlink = document.querySelector('a[href="#tlink"]');

tlink.addEventListener('click', function(){
console.log(tlink.getAttribute('href'));
});
} 

 #clink {
position:relative;
display:block;
width:100%;
height:20rem;
background:gray;
}

#tlink {
position:relative;
display:block;
width:100%;
height:20rem;
background:yellow;
} 

 <a href="#tlink">GoTo T-Link</a>
<div id="clink"></div>
<div id="tlink">HERE IS T-LINK</div> 

Вы можете сравнить свойство хэша ссылки, на которую нажали, со свойством хэша объекта location

 document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', (e) => {
    const isSameHash = el.hash === location.hash;    
    console.log(isSameHash ? 'Already selected' : 'New Hash')
  });
}) 

 <a href="#foo">Foo</a><br/><a href="#bar">Bar</a>