JavaScript для верстальщика. Урок 06. Улучшаем плавный скролл
Сделаем так, чтобы при клике на каждый элемент меню страница скроллилась до нужного блока.
Получаем событие клика на каждую ссылку меню:
$("#js-nav a").on("click", function(event) {
});
Отменяем событие по умолчанию:
event.preventDefault();
Проверяем, что код работает. Для этого внутри кода пишем:
console.log("click");
При клике по ссылкам меню в консоли появляется надпись click.
Теперь нам нужно при клике по ссылке скроллить именно до конкретного блока. Как это организовать. Делаем следующее. Каждому блоку, до которого будет скроллиться страница, прописываем свой собственный id. затем эти же id пишем у ссылок, при клике по которым должен идти скролл к данному блоку. То есть мы создаём якоря:
var currentBlock = $(this).attr("href");
Мы создаём переменную currentBlock в которой сохраняем атрибут href той ссылки, по которой был сделан клик.
Получим значение расстояния от верха страницы до блока и сохраним её в переменную currentBlockOffset. Обратите внимание, что сохранённый в переменной currentBlock attr("href") возвращает нам значение с решёткой, то есть готовый селектор по id. Поэтому $(currentBlock) содержит селектор по id того блока, расстояние до которого определяем.
var currentBlockOffset = $(currentBlock).offset().top;
Проверяем
console.log(currentBlockOffset);
Теперь при клике по ссылкам в консоли видим расстояние до блока
Осталось проскроллить страницу
$("html, body").animate({
scrollTop: currentBlockOffset - 20
}, 500);
20 рх отнимаем потому что это высота меню, которое зафиксировано и высота которого не учитывается браузером.
Код полностью:
$("#js-nav a").on("click", function(event) {
event.preventDefault();
var currentBlock = $(this).attr("href");
var currentBlockOffset = $(currentBlock).offset().top;
$("html, body").animate({
scrollTop: currentBlockOffset - 20
}, 500);
});