Вау! Я пол недели сидел разбирал сложный код на оверфлоу, закипал, а тут так просто оказывается.. Но думаю там было сложно из-за кроссбраузерности, но мне пока и так норм! Большое спасибо автору!
Ещё вчера я задумался над тем, как можно грамотно и без геморроя, а самое главное - красиво сделать прокрутку, и уже сегодня вышел твой видос) спасибо тебе, Артём, большое!))
Искал другое, наткнулся на это, ничего страшного, плюс одно знание в копилочку, и макс топчик, рекомендую вам его плейлист с js плагинами, и ещё js решения, очень полезная, тема, впервые вижу годную рекламу
Вот тоже работающий (в 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; };
Артем , спасибо, как всегда полезно! У меня вопрос, а что делать , если вдруг Ты сделал уже вот такой скролл а тебе прилетает правка на сафари или ie, т е нужно все реализовывать по другому с нуля или можно использовать обходной путь и что-то добавить, подскажи пожалуйста.
А функцию scrollTo(footer) обязательно запихивать в стрелочную функцию в навешивании click на button? можно просто button.addEventListener('click', scrollTo(footer))?
Это все классно конечно. Но а как быть когда я просто создаю ссылку и привязываю ее к якорю?) можно ли как то так же грамотно скролить абсолютно все на странице?) что есть что бы был универсальная функция
@@АннШ, вы уверены? Резко перемещаться по якорям это просто обычное поведение html-ссылки по #id. Однако Dmitrij Yakovenko что-то про строчку.css написал, я вот и удивляюсь, что это за секретный метод?
а главное поддержка почти всего) меня больше смутило использование стрелочных функций с es6 и переменной через var es5...2020 в конце концов, переменной var должен пользоваться лишь babel для кроссбраузерной работы! немного зашкварненько так, ведь более не подготовленые ребята так и будут повторять, а потом будут задавать им вопросы при устройстве на галеру "бро, зачем ты пишешь на двух версиях" и вылетит он с таким кодом с этой канторы даже самой бичевской куда подальше без права вернуться и говнокодить... видосы полезные, но ля, code style никто не отменял даже для фрилансеров!!!
10 минут потраченного зря времени, на кой нужен этот метод если не работает в IE/Safari? В какой вселенной может существовать проект на который не будут заходить из этих браузеров?
Около года учусь фронтэнду и периодически натыкаюсь на ваши видео. Всегда очень понятно и доступно, у вас очень хорошее умение преподавания!!
Урааа, наконец то вернулись нормальные видео старых форматов
Вау! Я пол недели сидел разбирал сложный код на оверфлоу, закипал, а тут так просто оказывается.. Но думаю там было сложно из-за кроссбраузерности, но мне пока и так норм! Большое спасибо автору!
Ещё вчера я задумался над тем, как можно грамотно и без геморроя, а самое главное - красиво сделать прокрутку, и уже сегодня вышел твой видос) спасибо тебе, Артём, большое!))
html {scroll-behavior: smooth}
@@eugenbelousov5027 в Хроме вот так разве работает?
А что если не работает даже в исходнике урока на Codepen ?
Спасибо большое, очень долго искал подобное видео и вот от моего любимого блогера.
У меня в google chrome, не работает плавно, оно резко перемещает, что делать?
чистый js, чистый кайф
спасибо!
Отличный ролик! Спасибо Артём, на чистом js это вообще великолепно. Обязательно испытаю.
спасибо за исходники!!!!
КРасавчик))) спасибо большое))
Искал другое, наткнулся на это, ничего страшного, плюс одно знание в копилочку, и макс топчик, рекомендую вам его плейлист с js плагинами, и ещё js решения, очень полезная, тема, впервые вижу годную рекламу
А если елемент вложен будет? ОфсетТоп даёт офсет к топу родителя. И то - с нюансами. Его вычислять придется, если родитель не боди.
класс,Артем)как раз допиливаю сайт и искал как сделать прокрутку.Нашел только на css(scrool-behavior:smooth).Но не всеми браузерами поддерживается
Спасибо! Тема с координатами очень замороченная..
Если будут еще примеры (чуть сложнее желательно) - будет здорово!
Лайк.
Как вы в 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();
}());
Артем , спасибо, как всегда полезно! У меня вопрос, а что делать , если вдруг Ты сделал уже вот такой скролл а тебе прилетает правка на сафари или ie, т е нужно все реализовывать по другому с нуля или можно использовать обходной путь и что-то добавить, подскажи пожалуйста.
В таком случае нужно искать другое кроссбраузерное решение. Например, построенное на requestAnimationFrame
А функцию scrollTo(footer) обязательно запихивать в стрелочную функцию в навешивании click на button? можно просто button.addEventListener('click', scrollTo(footer))?
В таком случае эта функция запустится независимо от того, нажал пользователь на кнопку или нет. Колбек функция как раз решает эту проблему
Круто и главное просто)
почему пишет "невозможно прочитать свойство offsetTop, равное нулю"
кто знает можете ответить буду благодарен
скорее всего опечатка в имени элемента. так же было.
Почему бы не повешать в css на body {scroll-behavior: smooth} и якоря, так же проще?
scroll-behavior: smooth; тоже не поддерживает в сафари
Это все классно конечно. Но а как быть когда я просто создаю ссылку и привязываю ее к якорю?) можно ли как то так же грамотно скролить абсолютно все на странице?) что есть что бы был универсальная функция
Да, в обработчик засунуть все ссылки, а не отдельную кнопку
Я по привычке включил видос твой посмотреть, и если поддержка была в начале видоса, я бы дальше не смотрел)
Поэтому я и не поставил поддержку в самое начало)
А почему addEventListener, когда на элемент button можно повесить событие onclick. Вот так - buttton.onclick = function() {}
А как дальше сделать скажи пожалуйста
В jQuery же метод работает во всех браузерах, как они добились этого
с помощью requestAnimationFrame
Дайте ка угадаю свойство scroll-behavor)
Не угадал)
@@chugundur да я понял уже , по названию подумал что на цсс будет а там только это свойство поможет хоть и поддержка не супер
На іе пофіг, а вот сафари это важно
а зачем это делать на js, если можно просто на css одну строку написать и по якорям прыгать
а как это на css плавно сделать?
перемещаться будет, но резка. Плавность только через JS добавляется.
@@АннШ, вы уверены? Резко перемещаться по якорям это просто обычное поведение html-ссылки по #id. Однако Dmitrij Yakovenko что-то про строчку.css написал, я вот и удивляюсь, что это за секретный метод?
А теперь давайте научу плавной прокрутке на чистом css, без js 😏
html {
scroll-behavior: smooth;
}
Поздравляю!
Правда с поддержкой беда небольшая. Что в первом, что во втором случае. + Id блока останется в url
И все ? :) И везде работает?
Плохой способ. Если ты зайдешь на страницу с хешом, то страница будет при первой загрузке плавно скролится, а это не всегда нужно.
а давайте кроссбраузерно как то? через интервал может
Да, есть вариант через интервал
у меня даже в chrome не работает
То же самое можно было сделать при помощи обычного CSS с его "body { scroll-behavior: smooth; }" с такой же хреновой поддержкой
Тогда придется якоря использовать, париться с id и загаживать URL. А пример довольно простецкий. Можно и мудренее прокрутки придумать благодаря JS.
А ведь можно обойтись и вот этим методом Element.scrollIntoView() - developer.mozilla.org/ru/docs/Web/API/Element/scrollIntoView
а главное поддержка почти всего) меня больше смутило использование стрелочных функций с es6 и переменной через var es5...2020 в конце концов, переменной var должен пользоваться лишь babel для кроссбраузерной работы! немного зашкварненько так, ведь более не подготовленые ребята так и будут повторять, а потом будут задавать им вопросы при устройстве на галеру
"бро, зачем ты пишешь на двух версиях" и вылетит он с таким кодом с этой канторы даже самой бичевской куда подальше без права вернуться и говнокодить... видосы полезные, но ля, code style никто не отменял даже для фрилансеров!!!
от души! благодаря этой ссылочке замутил быстро то, что нужно.
а по видео не робит.
10 минут потраченного зря времени, на кой нужен этот метод если не работает в IE/Safari? В какой вселенной может существовать проект на который не будут заходить из этих браузеров?
Ах ты бедненький :)))
Зделай вёрстку сайтов в live
кто в 2020 году использует ES5? :C
Они ещё обучают этому за деньги 😅
Здравствуйте!
Капец! Это же не плавный скролл! Это плавный якорный переход...