Плавный скролл до элемента

Реализуем следующее: после клика по ссылке будет происходить плавный скролл до элемента. Реализуем это без использования плагинов сначала при помощи jQuery, а затем на чистом JavaScript

Сначала в HTML реализуем обычный "грубый" переход к секции, а затем уже добавим jQuery для создания плавности скролла

Добавим id секциям к которым мы хотим выполнять скролл, а ссылкам атрибут href в формате #name. Решетка - означает идентификатор (id), а name - имя идентификатора.

HTML файл получится примерно такой

<section>
    <a href="#element" class="scrollto">Ссылка</a>
</section>

<section id="element">Секция</section>

Атрибут href указывает к какому элементу необходимо осуществить переход

Теперь добавим плавности с помощью jQuery. В js-файле напишим код

$('.scrollto').on('click', function(){
    let _this = $(this).attr('href');
    if ( $(_this).length != 0 ) {
        $('html, body').animate({
          scrollTop: $(_this).offset().top
        }, 765);
    }
    return false;
});

Чтобы добавить плавность перехода для необходимого элемента, просто добавьте ссылке класс scrollto

Изменить скорость скролла можно поменяв значение "765"

Плавный скролл для всех элементов начинающися с #

Для этого мы обратимся к селектору атрибута тега a при помощи ^ - что будет означать, что мы выбираем все ссылки, начинающиеся с # (решётки)

$('a[href^="#"').on('click', function(){
    let _this = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(_this).offset().top
    }, 765);
    return false;
});

Плавный скролл на чистом JavaScript

Будем использовать метод scrollIntoView(). Поддержка браузерами на момент написания статьи составляет 97.51%

const smoothLinks = document.querySelectorAll('a[href^="#"]');
for (let smoothLink of smoothLinks) {
    smoothLink.addEventListener('click', function (e) {
        e.preventDefault();
        const id = smoothLink.getAttribute('href');
        document.querySelector(id).scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    });
};
21/09/2019 11:12
Николай
21/09/2019 11:12