Плавная прокрутка до якоря на чистом Java Script

[@ITDoctor]

Супер курс по языку JavaScript: stepik.org/z/113653 Код скрипта, немного улучшенный: gist.github.com/morphIsmail/06a3820225a0a6a0aa8e77bdfb597aed Там же читайте описание, хотя код полностью прокомментирован.

[@demendarkness5562]

Спасибо большое автору! Все работает! Перепробовал и пересмотрел кучу видео с другими методами, в частности scrollTo, ничего не работало, после этого видео все сразу и без ошибок заработало! Спасибо большое!

[@ITDoctor]

Рад слышать

[@sergorfl2030]

Всё коротко и понятно! Спасибо огромное!

[@ITDoctor]

Пожалуйста

[@zmeygorynych5684]

Краткость сестра таланта. Большое спасибо за видос! Ты молодец)

[@arayoflight]

Ого, супер! И про якоря и про плавную прокрутку на js. Как всегда, очень полезно)))

[@СяргейЛучыновіч]

Большое спасибо за скрипт! быстро, доступно и главное работает!

[@ITDoctor]

Пожалуйста

[@Мурад-ы3ш]

Большое вам спасибо за видео, помогли ) Давно искал эту фичу

[@ITDoctor]

Рад что было полезно

[@Crynixx_Editz]

спасибки кратко (и обяснено хорошо лайк)

[@vladatoday4957]

Я очень долго не могла реализовать плавный переход по якорям((( Все перепробовала, но так и не поняла что не так... Сработал только этот код!!! Ура! спасибо!!!

[@ITDoctor]

Пожалуйста

[@vichislav_tv]

исчерпывающи, спасибо! (это еще "три" слова, специально для алгоритмов KZbin)

[@ITDoctor]

спасибо и вам!

[@pilot1847]

Большое спасибо!

[@ITDoctor]

Всегда пожалуйста!

[@abdulazizfront]

От душии брат

[@ДмитроСамиляк]

Спасибо, очень просто и все работает!!! Удачи!!!

[@ITDoctor]

Пожалуйста

[@pawpawqwertyuiop]

Спасибо большое! :) Коротко и ясно :)

[@ITDoctor]

Рад что понравилось

[@taran_dm]

Спасибо. Твой код сработал!

[@ТОЛЬКОПОБЕЗДОРОЖЬЮ]

Класс, спасибо

[@ITDoctor]

Пожаулйста

[@browix3114]

Спасибо за видео! Помогло

[@ITDoctor]

пожалуйста

[@tony_trueman]

Спасибо за отличное видео! Буду рад увидеть на канале слайдер, фильтр галлереи и прочие вещи, которые можно сделать на ванильном JS.

[@ITDoctor]

Цель данного плейлиста как раз в этом, так что еще будет многое.

[@ВероникаЧернобай-ъ8л]

Спасибо, без воды по делу)))

[@ITDoctor]

Пожалуйста

[@ОлегПаршегуба-с1е]

Очень круто, спасибо большое!

[@ITDoctor]

Пожалуйста

[@ОтецВалерьян-ф2в]

Спасибо большое!)

[@ITDoctor]

Пожалуйста

[@ОтецВалерьян-ф2в]

@@ITDoctor залил на гитхаб пейджс сайт и плавная прокрутка почему-то пропала,хотя локально на компе все работает. В консоли пишет что не подключился файл джс походу. Файл подключен внизу хтм дока. В чем может быть проблема?

[@jeka_evgeniy]

Спасибо!

[@ITDoctor]

пожалуйста

[@_Lanselot_]

А время прокрутки можно устанавливать, если например хочется ещё плавней? Благодарю Вас за урок!!!

[@Elena.S.]

Спасибо :)

[@ITDoctor]

Пожалуйста

[@green3216]

Круто ! Спасибо 😊

[@Antoxalk]

Спасибо, а можно это прокрутку сделать медленнее или наоборот быстрее ?

[@Vlad-em1bx]

супер! код заработал!!!!

[@ЕленаСуббота-х5щ]

Спасибо

[@ITDoctor]

Пожалуйста

[@shortsFilmsUA]

Спасибо, помогли!

[@ITDoctor]

Пожалуйста

[@Newada001]

Что делать если не работает? Не перемещает

[@ДмитрийЮщенко-и1е]

Спасибо Вам большое :)

[@СергейПресняков-о4р]

behavior smooth по умолчанию в chrome отключены, нужно в настройках копаться и включать нужный флаг. Но поскольку пользователи таким заморачиваться не будут, считай что этот способ больше не рабочий. Даже если в следующей версии хрома включат обратно, прежде чем в продакшене такое использовать нужно чтобы хотя бы 95% пользователей обновились на него

[@cy66a]

Всем привет! Объясните, пожалуйста, для чего на 4:05 нужна пустая строка в document.querySelector(' ' + blockID).scrollIntoView() перед blockID?

[@NinjaBlade0822]

что бы к айди блока прокрутки подключить, можно сделать намного проще все, сделать переменную якоря, потом уже к ней подключать scrollIntoView

[@Lider_mahinator]

Если простым языком объяснять - то он значение переменной blockID сделал текстом (прибавил к пустой строке).

[@Boned101]

Давай больше фишек на JS!

[@mew6085]

заебись, четко, спасибо огромное

[@Gazovchik]

Интересно - вчера сделал скролл (по видео конечно) на jQuery, Но я так понимаю - Нужно знать как можно больше разных способов реализации...... ?

[@Gazovchik]

Всем успехов в обучении мира и добра!

[@LaboRut1337]

А если несколько таких хочу сделать то там нужно еще переменные создавать или просто в уже существующую закинуть еще одно название секции?

[@ITDoctor]

возможно это видео kzbin.info/www/bejne/lYqvoamkprZsa8k даст вам некоторые ответы. ну и конечно же изучение фундаментальных основ языка программирования тут kzbin.info/aero/PLuY6eeDuleINoCQtGZsMoVVCSgEH7gKQ5

[@LaboRut1337]

@ITDoctor спасибо большое, посмотрю чуть позже, а то занят немного

[@_cyborg]

Я писал ссылку на id="1". У меня не работало, долго искал в чем проблема. В общем, если просто на цифру делать ссылку, то функция не работает. Нужно обязательно какие-нибудь буквы добавлять

[@СергейПресняков-о4р]

Все равно перемещает резко. preventDefault работает - ссылка с ним не перекидывает. Селекторы отработали правильно - в консоль выводил найденные DOM-ноды

[@vladislavvulf1]

А вот решение в три строки ( css ) html { scroll-behavior: smooth; }

[@ITDoctor]

в целом поддержка у этого свойства неплохая, но не идеальная: caniuse.com/css-scroll-behavior

[@naida-web]

Спасибо большое. Почему то именно этот код сработал у меня. А в JavaScript никак не смогла добиться плавной прокрутки. Я новичок 🙈 и самостоятельно изучаю вёрстку сайта. Спасибо вам огромное!

[@Rusificator]

@@vladislavvulf1 лучший, js не сработал почему-то хахаха

[@ВолодимирМакаренко-в5ц]

а как менять скорость?

[@ВалерийБалятинский]

ДРУГИ! Подскажите как эту приблуду подключить в битриксе, на главной странице, на слайде есть кнопка для ссылки, как на кнопку подключить ссылку?

[@СергейПресняков-о4р]

Если есть кнопка для ссылки, то в админке на странице редактирования слайда должно быть свойство для заполнения этой ссылки. Туда заполняем атрибут href с решеткой. Также в шаблоне сайта должен быть подключён js, который и делает всю магию.

[@ratiotribus6271]

я не мастер js но знаю что массивы лучше проходить с помощью методов массивов а не обычных циклов, например forEeach

[@Иван-н3о4л]

а как сделать чтоб не по кнопке, а автоматически доскролливало если немного сдвинется

[@АлимАхметов-ы3п]

Все работает как надо, кроме устройств на IOS, это из за того что они пока не поддерживают smooth?

[@ITDoctor]

возможно

[@картес-ж7ж]

А можно этот код оптимизировать? Я пробовал уже сразу с полученным селектором работать. Чтобы уже сразу при клике на anchors , выполнялся ScrollIntoView . Но у меня ничего не получилось

[@iventeye]

Спасибо, все четко

[@slaydshou]

Все работает, но почему в dreamweaver строка for(let anchor of anchors) подсвечивается как ошибка? И возможно ли что то подправить?........начинающий

[@ITDoctor]

Насчет дримвьювера не могу подсказать

[@СергейПресняков-о4р]

Может заменить это на anchors.forEach((anchor) => { // делаем что-то с anchor })

[@slaydshou]

@@СергейПресняков-о4р Подзабил на эту ошибку, почему то на let так реагирует, var или const - все нормально

[@ruslancorporation1152]

Спасибо большое за уроки. Не очень уместный вопрос, но как музыкальное произведение называется, которое ролик закрывает?)

[@ITDoctor]

Kevin MacLeod - If I Had a Chicken

[@futoma2969]

а как сделать статичную кнопку, которая будет перемещать на верх?

[@ITDoctor]

Добавить на body любой id Задать ссылку на этот id чтобы она вела вверх В css установить стили для ссылки, например position fixed, bottom 5px, right 5px

[@Ruslan-f3z2x]

почему-то перестало работать(

[@АлександрШатохин-н7г]

Отличное видео. Извините, что может быть вопрос не в тему, но как получить большое кол-во элементов на странице разных классов. Допустим есть элементы с классами от a до z. Можно ли их получить как-то с помощью функции. Не прописывая document.querySelector каждый раз?

[@ITDoctor]

цикл написать , пошаманить с его параметрами и как то сделать чтобы по символам перебирал а не по числам, Пробуйте, эксперементируйте.

[@YevhenZhuchenko]

document.querySelectorAll(".class1, .class2"); Любое количество, любых css селекторов передаешь строкой через заяптую.

[@cipher9476]

Если у вас уже есть якоря, то напишите просто html{ scroll-behavior: smooth; }

[@ITDoctor]

Да. в этом видео я показывал поддержку этого свойства разными браузерами kzbin.info/www/bejne/j4jYln-Oa7uoqdU

[@Ivan-tr5vt]

Этот способ не поддерживается браузарами Safari. Плавной прокрутнки там не будет, smooth не работает.

[@zRangelz]

а чем неугодил просто css который коротко понятно делает тоже самое?

[@ITDoctor]

Код в студию если у вас есть хорошее решение

[@vladislavvulf1]

@@ITDoctor html { scroll-behavior: smooth; }

[@sevi43]

Метод не везде работает с плавностью) UPD Можно просто в css поставить scroll-behavior: smooth))))

[@СеменОробинский-п4е]

В случае CSS это работает только для Chrome и Firefox

[@everemchuk]

@@СеменОробинский-п4е в случае метода scrollIntoView behavior не работает в Safari

[@СергейПресняков-о4р]

@@СеменОробинский-п4е В Chrome уже не работает

[@evgeniykolmak5459]

В сафари не работает

[@СергейПресняков-о4р]

Маководы должны страдать) В сафари вообще поддержка современных фич лишь чуть лучше чем в Internet Explorer

[@AlexFrost-j2i]

зачем искать много кнопок, и возвращать коллекцию querySelectorAll, если по сути кнопка одна всегда на сайте, прокрутки!

[@iAmSvyat]

На лендинге навигация может строится на большом количестве якорей

[@panmazurokbunpalolecsandr178]

Мне видео понравилось но я получаеться только увиден как это сделать но не понял. Можно как то более детально объяснять, я многое не понял, хотя я не новичок

[@alexandr8978]

Увы, не работает

[@ITDoctor]

в чем именно проблема. что в консоли написано?

[@alexandr8978]

@@ITDoctor anchor.eddEventListener is not a function

[@ITDoctor]

@@alexandr8978 gist.github.com/morphIsmail/06a3820225a0a6a0aa8e77bdfb597aed

[@alexandr8978]

@@ITDoctor Отлично! Спасибо! Заработало)

[@СергейПресняков-о4р]

@@alexandr8978 прямо так и написано "edd"? Тогда неудивительно)

[@ВладимирвладимиР-ь8ш]

нихуя не понятно.кто нибудь ,может логически объяснить ,что он там пишет и почему в таком порядке?

[@TheKirk1989]

Ниочем , все поверхностно, без объяснения деталей, аргументов, поддержки и.т.д

[@user-oc2lz6tb9j]

а что то свое добавить то на этого ума нету

[@Bloodravenful]

когда задаешь переменную как "anchors" а цикле используешь "anchor", задаешь как множество а используешь одну? т.е. js понимает такие множества?

[@ВладимирЗлатомрезов]

Спасибо за видео.

[@ITDoctor]

Пожалуйста

[@khakimweb-1270]

Спасибо большое! Очень полезно

[@ITDoctor]

пожалуйста