Якорь используя class, а не id

07 февраля 2022, 18:50

Обычно ссылки на определенный блок привязаны через id. Можно ли как то сделать через class?

Answer 1

UPD

для полноценной эмуляции якоря, необходимо добавить прокрутку по хэшу в адресе страницы "sitename.com/page1#ClassName" (#ClassName - якорь).

для реализации необходимо получить якорь из адреса, например используя location.hash, и реализовать обработку и прокрутку при загрузке страницы.

предостережение

элементов с одинаковым class name может быть несколько

документация

scroll - https://developer.mozilla.org/ru/docs/Web/API/Window/scroll
scrollTo - https://developer.mozilla.org/ru/docs/Web/API/Element/scrollTo
scrollTop - https://developer.mozilla.org/ru/docs/Web/API/Element/scrollTop
getBoundingClientRect - https://developer.mozilla.org/ru/docs/Web/API/Element/getBoundingClientRect
location.hash - https://developer.mozilla.org/ru/docs/Web/API/Window/location

пример

window.onload = () => { 
	const C = document.getElementsByClassName('C')[0]; 
	const { left, top } = C.getBoundingClientRect() 
	window.scroll(left, top) 
 
	const button = document.getElementsByTagName('button')[0]; 
	button.onclick = () => { 
		window.scrollTo({ 
			left: 0, 
			top: 0, 
			behavior: 'smooth' 
		}) 
	} 
}

div { 
	position: relative; 
	height: 2500px; 
} 
button { 
	position: fixed; 
	right: 18px; 
	bottom: 25px; 
	background-color: black; 
	color: white; 
}

<div class="A"><h2>A</h2></div> 
<div class="B"><h2>B</h2></div> 
<div class="C"><h2>C</h2></div> 
<div class="D"><h2>D</h2></div> 
 
<button>T O P</button>

Answer 2

После нажатия на ссылку, можно взять нужный элемент по классу, добавить ему временный id, добавить тот же id под href кликнутой ссылки... а когда браузер сделает свою работу, замести следы))

В примере у каждой ссылки своя пара:

setClassHref("js-anchor", "js-target"); 
 
function setClassHref(anchorClass, targetClass) { 
  let anchor = document.querySelectorAll('.' + anchorClass); // ссылки 
  let target = document.querySelectorAll('.' + targetClass); // блоки 
 
  let tempHref = "anchor-bubu"; // временное id 
  let trueTargetId = null; // на всякий случай сохранить реальный id цели, если он есть. 
 
  for (let i = 0; i < anchor.length; i++) { 
    anchor[i].addEventListener('mouseup', function() { 
      this.setAttribute("href", "#" + tempHref); 
 
      trueTargetId = target[i].id; 
      target[i].id = tempHref; 
    }); 
 
    anchor[i].addEventListener('click', function() { 
      setTimeout(() => { 
        this.setAttribute("href", "JavaScript:void(0);"); 
        target[i].id = trueTargetId; 
      }, 0); // Таймаут без таймера - сработает сразу после срабатывания href 
    }); 
  } 
}

nav { position: fixed; top: 0; right: 0; }

<nav> 
  <a href="JavaScript:void(0);" class="js-anchor">bubu-1</a> 
  <a href="JavaScript:void(0);" class="js-anchor">bubu-2</a> 
  <a href="JavaScript:void(0);" class="js-anchor">bubu-3</a> 
</nav> 
 
<div style="margin-top: 500px;" class="js-target">bubu-1</div> 
<div style="margin-top: 500px;" class="js-target">bubu-2</div> 
<div style="margin-top: 500px;" class="js-target">bubu-3</div>