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

Предлагаю 2 варианта, как реализовать плавный скролл к элементу на странице.

Вариант с использованием CSS

Для реализации плавной прокрутки через CSS нужно всего лишь добавить следующие стили: 

html {
    scroll-behavior: smooth;
}

Теперь прокрутка к любым элементам при клике на якорь будет совершаться плавно. Также дополнительно можно определенным элементам добавить свойство, которое будет задавать, какой отступ будет перед элементом сверху после прокрутки. Например: 

h2 {
    scroll-margin-top: 10px;
}

Вариант с использованием JS

Также есть вариант реализовать плавную прокрутку через JS. Для этого добавляем событие клика по document: 

document.addEventListener('click', async (e) => {
    const link = e.target.closest('.js-smooth-scroll');

    if (!link) return;

    e.preventDefault();

    const element = document.querySelector(link.getAttribute('href'));

    if (!element) return;
    
    window.scrollBy({
        top: element.getBoundingClientRect().top, //элемент
        behavior: 'smooth', //параметр, задающий плавную прокрутку
    });
});

HTML же выглядит так: 

<a href="#anchor" class="js-smooth-scroll">Якорь</a>

Здесь проверяется, совершен ли клик по ссылке с классом js-smooth-scroll, после чего проверяется наличие на странице элемента с id, указанным в атрибуте href. Затем производим прокрутку к элементу, используя функцию window.scrollBy(), в которую передаем позицию элемента на странице и параметр, что прокрутка должна быть плавная. Подробнее о функции тут.