JavaScript для верстальщика. Урок 04. Создание плавного скролла

 Просмотр информации о событиях в jQuery - http://api.jquery.com/category/events/

основные события click и hover

Отслеживаем событие клик и меняем текст для проверки:

$ (".js-get-started").on("click", function(){
        $ (this).text("Test");
    })

Конструкция $ (this) заменила $ (".js-get-started"). Так как мы находимся внутри события, связанного с этой кнопкой, повторно указывать её селектор не нужно. This означает, что речь идёт о том же самом элементе. по которому был сделан клик.

Предыдущую конструкцию можно сократить:

$ (".js-get-started").click(function(){
        $ (this).text("Test");
    })

Для сравнения. В vanilla js, не использующем библиотеку jQuery, событие клика отслеживается так:

var getStarted = document.querySelector(".js-get-started");
getStarted.addEventListener("click", function(){
    // про смену текста я ещё не знаю
});

Трудно не заметить сходства конструкций, только в jQuery они намного короче. Это и есть то. что является девизом jQuery:  write less, do more.

Отмена события по умолчанию

$ (".js-get-started").on("click", function(event){
        event.preventDefault();
        // здесь продолжение кода
    })

Точно так же: event.preventDefault(); выглядит отмена события по умолчанию и в vanilla js. 

Таким образом, знание jQuery поможет освоить js, точно так же как базовые знания js позволят более осознанно учить  jQuery. И это не удивительно, если вспомнить, что  jQuery это и есть js-библиотека.

Измеряем расстояние до блока

Чтобы проскроллить страницу до определённого блока, нужно получить расстояние от верха страницы до этого блока. Присваиваем блоку id = "js-plans" 

Отступ блока от верха браузера:

$("#js-plans").offset().top;

Проверяем: присваиваем переменную и выводи её значение в консоль браузера:

var plansOffset = $("#js-plans").offset().top;
console.log(plansOffset);

Функция плавного скролла

$("html, body").animate({
            scrollTop: plansOffset
        }, 500);

Здесь последнее число - время скролла в миллисекундах. Можно его увеличивать или уменьшать.

Код полностью:

$(function() {

    $ (".js-get-started").on("click", function(event){
       
        event.preventDefault();
       
        var plansOffset = $("#js-plans").offset().top;
       
        $("html, body").animate({
            scrollTop: plansOffset
        }, 5000);

    })
});