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

Я по привычке включил видос твой посмотреть, и если поддержка была в начале видоса, я бы дальше не смотрел)

Отличный ролик! Спасибо Артём, на чистом js это вообще великолепно. Обязательно испытаю.

а зачем это делать на js, если можно просто на css одну строку написать и по якорям прыгать

В jQuery же метод работает во всех браузерах, как они добились этого

Вот тоже работающий (в 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();
}());

А функцию scrollTo(footer) обязательно запихивать в стрелочную функцию в навешивании click на button? можно просто button.addEventListener('click', scrollTo(footer))?

Почему бы не повешать в css на body {scroll-behavior: smooth} и якоря, так же проще?

класс, Артем)как раз допиливаю сайт и искал как сделать прокрутку.Нашел только на css(scrool-behavior:smooth).Но не всеми браузерами поддерживается

Около года учусь фронтэнду и периодически натыкаюсь на ваши видео. Всегда очень понятно и доступно, у вас очень хорошее умение преподавания!!!

То же самое можно было сделать при помощи обычного CSS с его «body { scroll-behavior: smooth; }» с такой же хреновой поддержкой