Информация о видео

Flexbox и Less, Создаем интерактивность с помощью JavaScript, Верстаем по макету psd. В этом видео уроке мы будем делать интерактивное меню с плавной прокруткой на языке программирования JS. Для более простого обращения к элементам DOM мы будем использовать jQuery. Я показывал как создать меню с плавной прокруткой в видео курсе по JavaScript, поэтому сейчас мы просто воспользуемся готовым кодом. Я покажу вам как сделать плавную прокрутку до якоря с помощью JavaScript, а точнее jQuery. В одном из видео мы на реальном примере разбирали способ создания плавной прокрутки меню до нужного места на сайте. Плавная прокрутка меню очень хорошо выглядит и делает ваш сайт приятней для посетителей.
Макет PSD:
Файлы проекта:
Все Изображения:
ITDoctor канал, направленный на обучение начинающих веб-
разработчиков основополагающим знаниям таким как HTML, CSS, JavaScript, работа с базами данных и созданию сайтов своими силами. А так же работа в редакторе Brackets, Adobe Photoshop, установка и настройка локального сервера OpenServer и многое другое на канале it doctor.
Код на JS:
$(document).ready(function () {
$('a[href^="#"]').click(function () {
//Сохраняем значение атрибута href в переменной:
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top//можно вычесть высоту меню
}, 500);
return false;
});
});
Ссылка на jQuery (необходимо скопировать эти атрибуты в тег script):
src="
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"
✔Советую посмотреть:
Полный Код проекта меню с плавной прокруткой:
Модальное окно:
Диалоговые окна:
✔Наши группы в Социальных сетях:
Сайт ITDoctor:
Группа в ВК:
Мой Twitter:
◄ Предыдущее видео:
Подписывайтесь на канал ITDoctor и нажимайте на колокольчик чтобы сразу узнавать о появлении новых видео.

Если вы хотите поддержать развитие канала:
Сбербанк VISA: 4276 5200 1409 4318
Яндекс Кошелек: 410011260821995
QIWI: 4890 4943 0383 5581
WMR: R444308690108
WMZ: Z608507028676