Как обработать высоту страницы при переходе на якори?

Question

[Дмитрий]

Здравствуйте. На сайте установлены якори и при переходе по ним из-за приклеенного вверху хедера страница смещается ниже якоря ровно на высоту этого хедера. для якорей на индексной странице я сделал плавную прокрутку.

$("a.slide_to_anchor").click(function () {
        var elementClick = $(this).attr("href")
        var destination = $(elementClick).offset().top - $("#undefined-sticky-wrapper").height(); // отнимаем высоту хедера
        jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1000); // плавная анимация
        return false;
    });

Но вот как теперь обработать якори на других страницах (переход например с главной в /news/) чтобы нормально отображалось?

Answer 1

[littleguga]

Как вариант при загрузке страницы делать проверку на якорь в адресе и прокручивать выше на высоту хедера.

window.onload = function(){
    if(window.location.hash) {
      //если есть якорь, то скроллим вниз на высоту шапки
    } else {
      //здесь если нет, можно убрать блок else
    }
}

Comments

[Дмитрий]

да. position: fixed. Спасибо за исправление - в вопросе подправил. к сожалению, менять стиль страницы из-за якоря - не лучший способ решить проблему.

[littleguga]

Дмитрий: можете сайт показать? На готовом примере будет легче помочь.

[Дмитрий]

littleguga: публично пока нет. в личке могу

Answer 2

[Antisha777]

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
   anchor.addEventListener('click', e => { 
    e.preventDefault(); // Определяем целевой элемент по якорю 
    const targetId = anchor.getAttribute('href'); 
    const targetElement = document.querySelector(targetId); 
    if (targetElement) { // Высота header 
      const headerHeight = document.querySelector('.header').offsetHeight; // Позиция элемента с учетом высоты header 
      const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - headerHeight; // Плавный скролл 
      window.scrollTo({ top: targetPosition, behavior: 'smooth' }); 
    } 
  }); 
});