Java: Плавная прокрутка без jQuery | Smooth scroll without jQuery - видео HD

Java: Плавная прокрутка без jQuery | Smooth scroll without jQuery - видео
00:11:02
Обнаружено блокирование рекламы на сайте

Для существования нашего сайта необходим показ рекламы. Просим отнестись с пониманием и добавить сайт в список исключений вашей программы для блокировки рекламы (AdBlock и другие).

12n.ru 18124 ролика

Плавная прокрутка без jQuery | Smooth scroll without jQuery - видео.

В сегодняшнем уроке поговорим, как сделать плавную прокрутку на чистом JS без использования jQuery. @MaxGraph — cайты как страсть — Канал автора с 5 лет опытом фриланса и веб-разработки. На канале есть уроки по wordpress, по самым сложным темам в верстке, по доступности сайтов для людей с ограниченными возможностями. Автор показывает хорошие плагины на чистом js — канал без jquery. Кейсы из реальной работы, то, что приходилось писать самому с нуля. Исходники из урока: codepen.io/Aislam23/pen/zYvpNrNПодпишитесь на канал, если вам нравятся эти видео: goo.gl/Zuu7wEБольше контента в нашей группе Вконтактеhttps://vk.com/glo_academyИли в нашем Telegram-канале t.me/glo_academyПрисоединяйтесь к нашему сообществу Discordhttps://discord.gg/k5XzZ68Telegram-канал «Лысый из браузера»: tele.click/baldfrombrowserЧтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: vk.me/glo_academyЗаказать рекламу на канале: vk.me/aislam23 или t.me/aislam23---------Я использую хостинг Link Host с 2014 года link-host.net/billing/pl.php?1786
RSS
Vadim Sokolovsky
08:12
Я по привычке включил видос твой посмотреть, и если поддержка была в начале видоса, я бы дальше не смотрел)
Филипп Терминатор
13:51
Отличный ролик! Спасибо Артём, на чистом js это вообще великолепно. Обязательно испытаю.
Dmitrij Yakovenko
14:12
а зачем это делать на js, если можно просто на css одну строку написать и по якорям прыгать
Илья Пономарев
22:27
В jQuery же метод работает во всех браузерах, как они добились этого
Brodovoi
07:02
+1
Вот тоже работающий (в safari тоже) вариант на js

// Scroll to anchors
(function () {

const smoothScroll = function (targetEl, duration) {
const headerElHeight = document.querySelector('.header').clientHeight;
let target = document.querySelector(targetEl);
let targetPosition = target.getBoundingClientRect().top — headerElHeight;
let startPosition = window.pageYOffset;
let startTime = null;
const ease = function(t,b,c,d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t — 2) — 1) + b;
};
const animation = function(currentTime){
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime — startTime;
const run = ease(timeElapsed, startPosition, targetPosition, duration);
window.scrollTo(0,run);
if (timeElapsed < duration) requestAnimationFrame(animation);
};
requestAnimationFrame(animation);

};

const scrollTo = function () {
const links = document.querySelectorAll('.js-scroll');
links.forEach(each => {
each.addEventListener('click', function () {
const currentTarget = this.getAttribute('href');
smoothScroll(currentTarget, 1000);
});
});
};
scrollTo();
}());
SebastjanPereiro
17:11
А функцию scrollTo(footer) обязательно запихивать в стрелочную функцию в навешивании click на button? можно просто button.addEventListener('click', scrollTo(footer))?
Максим Синюк
16:16
+1
Почему бы не повешать в css на body {scroll-behavior: smooth} и якоря, так же проще?
Денис Скворцов
16:18
класс, Артем)как раз допиливаю сайт и искал как сделать прокрутку.Нашел только на css(scrool-behavior:smooth).Но не всеми браузерами поддерживается
elena bavarskaya
17:39
Около года учусь фронтэнду и периодически натыкаюсь на ваши видео. Всегда очень понятно и доступно, у вас очень хорошее умение преподавания!!!
Rasul Ali
21:59
+1
То же самое можно было сделать при помощи обычного CSS с его «body { scroll-behavior: smooth; }» с такой же хреновой поддержкой