Как сделать плавный скролл для сайта на JS

Как создать якорные ссылки?

Представим, что у вас есть одностраничный сайт с несколькими секциями: «О нас», «Преимущества», «Наши работы». Тогда разметка вашего сайта будет выглядеть следующим образом:

<nav class="scrollto">
    <ul>
        <li><a href="#element1">Ссылка-1</a></li>
        <li><a href="#element2">Ссылка-2</a></li>
        <li><a href="#element3">Ссылка-3</a></li>
    </ul>
</nav>

<section id="element1">Секция-1</section>
<section id="element2">Секция-2</section>
<section id="element3">Секция-3</section>

Как создать плавную прокрутку для якорных ссылок?

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

Разместите следующий скрипт в JS-файле вашего сайта:

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 = document.querySelector('.scrollto').offsetHeight;
        // const topOffset = 0; // если не нужен отступ сверху 
        const elementPosition = scrollTarget.getBoundingClientRect().top;
        const offsetPosition = elementPosition - topOffset;

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

Но как сделать отступ сверху при плавной прокрутке сайта? Все очень просто. В скрипте есть 2 строчки:

const topOffset = document.querySelector('.scrollto').offsetHeight;
// const topOffset = 0; // если не нужен отступ сверху 

Убираем первую строчку и задаем значение для второй. Например, если шапка вашего сайта равняется 70px, то пишем следующее:

// const topOffset = document.querySelector('.scrollto').offsetHeight;
const topOffset = 70; // отступ в размере 70px 

Вас интересует разработка сайтов? Хотите узнать больше о настройке рекламы или SEO? Подписывайтесь на нашу группу в Вконтакте и вступайте в беседу. А еще я всегда на связи и готов помочь с ответом на любые ваши вопросы.