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

Подписаться 71 тыс.

Просмотров 39 тыс.

50% 1

В этом уроке я покажу как сделать плавную прокрутку до якоря на чистом Java Script без использования jQuery. Плавная прокрутка до якоря необходима при создании красивых меню или оглавлений, поэтому необходимо знать как это реализовать.
✔Советую посмотреть:
Быстрый старт в JavaScript: • #0 Основы программиров...
Курс по JavaScript: • Уроки по JavaScript
⚡️ Эксклюзив на Boosty - boosty.to/itdo...
💡 Telegram канал - t.me/itdoctor_...
🎥 Курсы на Stepik - stepik.org/use...
💰 Донаты на ЮMoney - sobe.ru/na/itd...
ВКонтакте - itdocto...
Яндекс Дзен - zen.yandex.ru/...
Rutube - rutube.ru/chan...
#javascript #js #itdoctor

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 125

@ITDoctor 4 года назад

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

@cult2839 Год назад

Огонь спасибо за готовый код!

@СергейПресняков-о4р 2 года назад

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

@Newada001 3 года назад

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

@zmeygorynych5684 3 года назад

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

@vladislavvulf1 3 года назад

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

@ITDoctor 3 года назад

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

@naida-web 3 года назад

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

@Rusificator 25 дней назад

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

@Ruslan-f3z2x Год назад

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

@_Lanselot_ 3 года назад

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

@СергейПресняков-о4р 2 года назад

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

@arayoflight 5 лет назад

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

@_cyborg 2 месяца назад

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

@abdulazizfront Год назад

От душии брат

@sevi43 5 лет назад

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

@СеменОробинский-п4е 5 лет назад

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

@everemchuk 2 года назад

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

@СергейПресняков-о4р 2 года назад

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

@ratiotribus6271 Год назад

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

@taran_dm 4 года назад

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

@Fake_Smil3 Месяц назад

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

@Gazovchik Год назад

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

@Gazovchik Год назад

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

@evgeniykolmak5459 2 года назад

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

@СергейПресняков-о4р 2 года назад

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

@user-oc2lz6tb9j 2 года назад

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

@ВолодимирМакаренко-в5ц 3 месяца назад

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

@sergorfl2030 3 года назад

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

@ITDoctor 3 года назад

Пожалуйста

@vichislav_tv Год назад

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

@ITDoctor Год назад

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

@demendarkness5562 Год назад

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

@ITDoctor Год назад

Рад слышать

@ТОЛЬКОПОБЕЗДОРОЖЬЮ Год назад

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

@ITDoctor Год назад

Пожаулйста

@green3216 5 лет назад

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

@pilot1847 Год назад

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

@ITDoctor Год назад

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

@Ivan-tr5vt 2 года назад

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

@antonpravdin8259 5 лет назад

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

@ITDoctor 5 лет назад

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

@TheKirk1989 3 года назад

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

@Boned101 5 лет назад

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

@АлимАхметов-ы3п 3 года назад

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

@ITDoctor 3 года назад

возможно

@Мурад-ы3ш Год назад

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

@ITDoctor Год назад

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

@ВладимирвладимиР-ь8ш 3 года назад

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

@Vlad-em1bx 3 года назад

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

@demonics5151 2 года назад

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

@Иван-н3о4л 2 года назад

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

@cy66a Год назад

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

@NinjaBlade0822 Год назад

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

@Lider_mahinator Год назад

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

@картес-ж7ж 5 лет назад

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

@СяргейЛучыновіч 2 года назад

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

@ITDoctor 2 года назад

Пожалуйста

@ruslancorporation1152 5 лет назад

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

@ITDoctor 5 лет назад

Kevin MacLeod - If I Had a Chicken

@browix3114 Год назад

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

@ITDoctor Год назад

пожалуйста

@panmazurokbunpalolecsandr178 4 года назад

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

@ВалерийБалятинский 2 года назад

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

@СергейПресняков-о4р 2 года назад

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

@jeka_evgeniy 2 года назад

Спасибо!

@ITDoctor 2 года назад

пожалуйста

@pawpawqwertyuiop 2 года назад

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

@ITDoctor 2 года назад

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

@mew6085 3 года назад

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

@ВладимирЗлатомрезов 2 года назад

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

@ITDoctor 2 года назад

Пожалуйста

@cipher9476 2 года назад

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

@ITDoctor 2 года назад

Да. в этом видео я показывал поддержку этого свойства разными браузерами ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YWueLX6Vuss.html

@ОлегПаршегуба-с1е 3 года назад

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

@ITDoctor 3 года назад

Пожалуйста

@Elena.S. Год назад

Спасибо :)

@ITDoctor Год назад

Пожалуйста

@ЕленаСуббота-х5щ 2 года назад

Спасибо

@ITDoctor 2 года назад

Пожалуйста

@vladatoday4957 3 года назад

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

@ITDoctor 3 года назад

Пожалуйста

@khakimweb-1270 3 года назад

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

@ITDoctor 3 года назад

пожалуйста

@ДмитрийЮщенко-и1е 3 года назад

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

@alexandr8978 3 года назад

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

@ITDoctor 3 года назад

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

@alexandr8978 3 года назад

@@ITDoctor anchor.eddEventListener is not a function

@ITDoctor 3 года назад

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

@alexandr8978 3 года назад

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

@СергейПресняков-о4р 2 года назад

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

@AlexFrost-j2i 4 года назад

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

@iAmSvyat 4 года назад

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

@ОтецВалерьян-ф2в 2 года назад

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

@ITDoctor 2 года назад

Пожалуйста

@ОтецВалерьян-ф2в 2 года назад

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

@slaydshou 3 года назад

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

@ITDoctor 3 года назад

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

@СергейПресняков-о4р 2 года назад

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

@slaydshou 2 года назад

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

@futoma2969 3 года назад

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

@ITDoctor 3 года назад

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

@shortsFilmsUA 2 года назад

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

@ITDoctor 2 года назад

Пожалуйста

@Bloodravenful Год назад

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

@ДмитроСамиляк 3 года назад

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

@ITDoctor 3 года назад

Пожалуйста

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

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

@ITDoctor 5 лет назад

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