Как сделать скролл до элемента при клике на кнопку? (JS)

Question

Мне нужно, чтобы при клике по кнопке, страница прокручивалась до определённого элемента, при этом, оставляя зазор в 60px над ним(чтобы хедер его не перекрывал), но моё знание JS на очень грустном уровне, а код, который я копировал, не хотел адекватно работать. Прикрепил решение на чистом HTML, которое не решает проблему перекрытия хедером текста. Буду очень благодарен за помощь

    .header {
      height: 60px;
      background-color: burlywood;
      position: sticky;
      top: 0;
      width: 100%;
      font-size: 1.5rem;
    }

    nav {
      display: flex;
      justify-content: space-between;
    }

    section {
      height: 300px;
      font-size: 2rem;
      color: #fff;
    }
    #section1 {
      background-color: aquamarine;
    }
    #section2 {
      background-color: blueviolet;
    }
    #section3 {
      background-color: seagreen;
    }

<header class="header">
    <nav class="nav__buttons">
<a class="nav__button" href="#section1">Секция 1</a>
<a class="nav__button" href="#section2">Секция 2</a>
<a class="nav__button" href="#section3">Секция 3</a>
</nav>
</header>
<article class="scroller">
    <section class="slider-block" id="section1">Этот текст должен быть виден полностью после клика по ссылке</section>
    <section class="slider-block" id="section2">Этот текст должен быть виден полностью после клика по ссылке</section>
    <section class="slider-block" id="section3">Этот текст должен быть виден полностью после клика по ссылке</section>
</article>

upd. Желательно, чтобы блок был по центру экрана, после скролла, но если так нельзя, то не критично. Ещё раз спасибо

Answer 1

document.querySelectorAll('a[href^="#"').forEach(link => {

    link.addEventListener('click', function(e) {
        e.preventDefault();

        let href = this.getAttribute('href').substring(1);

        const scrollTarget = document.getElementById(href);

        const topOffset = 70; 
        const elementPosition = scrollTarget.getBoundingClientRect().top;
        const offsetPosition = elementPosition - topOffset;

        window.scrollBy({
            top: offsetPosition,
            behavior: 'smooth'
        });
    });
});

.header {
      height: 60px;
      background-color: burlywood;
      position: sticky;
      top: 0;
      width: 100%;
      font-size: 1.5rem;
    }

    nav {
      display: flex;
      justify-content: space-between;
    }

    section {
      height: 300px;
      font-size: 2rem;
      color: #fff;
    }
    #section1 {
      background-color: aquamarine;
    }
    #section2 {
      background-color: blueviolet;
    }
    #section3 {
      background-color: seagreen;
    }

<header class="header">
    <nav class="nav__buttons">
<a class="nav__button" href="#section1">Секция 1</a>
<a class="nav__button" href="#section2">Секция 2</a>
<a class="nav__button" href="#section3">Секция 3</a>
</nav>
</header>
<article class="scroller">
    <section class="slider-block" id="section1">Этот текст должен быть виден полностью после клика по ссылке</section>
    <section class="slider-block" id="section2">Этот текст должен быть виден полностью после клика по ссылке</section>
    <section class="slider-block" id="section3">Этот текст должен быть виден полностью после клика по ссылке</section>
</article>

БЛОГ НА HUSL

Как сделать скролл до элемента при клике на кнопку? (JS)

Ответы (1 шт):