Scroll to top
HTML-код
- Опубликовано: 25 авг 2024
- Очень часто на посадочных страницах (они же - landing page, они же - лэндинги) располагается много контента и для удобства пользователя справа снизу располагается кнопка, которая позволяет отмотать к началу страницы.
Именно про кнопку "Вверх" (или "К началу") я сегодня и расскажу. А чтобы она была ещё круче мы добавим ей индикацию прокрутки. Соответственно в зависимости от того, сколько пользователь прокрутил сайт, на столько будет заполняться индикация.
![Налог на незнание JavaScript - [Hamster Kombat]](http://i.ytimg.com/vi/PTdUmkT-yas/mqdefault.jpg)
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
Лайк?)
Определенно лайк
Подскажи, пожалуйста, какими ты пользуешься скриптами и дополнениями на vscode? Допустим w100 становится width:100; и печать на двух строчках сразу:)
Заранее огромное спасибо))
безусловный ЛАЙК!!!!!!!!
@@Chewiee28 "w100 становится width:100" emmet, а "печать на двух строчках сразу" сама вс код это поддерживает, зажимаешь альт и ставишь курсор левой кнопкой мыши на нужные места, потом печатаешь
svg бы еще в нормальном формате увидеть, без переносов, а то у меня она не работает.
Просто не понимаю, почему так мало просмотров. Вы - один из лучших по обьяснениям и примерам и не первый раз выручаете. Спасибо огромное за работу :)
Вот так и надо работать! всегда с улыбкой )))
Отлично!!! Показывайте больше таких фишек :))) спасибо за ваш труд
Стараюсь, спасибо -)
Спасибо большое за ваши труды👏 Очень полезно, понятно и качественно подано 👍
Благодарю
Спасибо большое за интересное видео! Мне как начинающему верстальщику очень интересно смотреть такие видео с фишками и подача информации у вас очень лёгкая и понятная! Продолжайте в том же духе!
Благодарю
Ахриненно получилось! Думал, как сделать с этой заливкой при скроле расчет. Из-за нехватки знаний js не получалось. Теперь понял. Срочно, лайк!
Спасибо -)
Блин, оч круто. Сделал похожую фишку, только менял цвет кнопки при прокрутке, даже сам формулы вывел для подсчёта уровня заливки. Доходчиво и круто, лайк.
Сутки спустя перспал с полученной информации,сегодня пересмотрел всё заново и всё встало на свои места,спасибо!)
О! Это круто! -))
Спасибо!
И вам спасибо за просмотр -)
Обожаю 🔥
Рад -)
Видео очень классное, но для новичков очень мало объяснений что и откуда взялось ;)
Спасибо, очень интересно
Спасибо за такой крутой урок)))Необычно и эффектно)
Спасибо больше. Полезно. То что надо!
Спасибо за видео) Классная рубрика!
Благодарю
Спасибо, мне очень сильно понравилось!!
Круто!
Виталий так позитивно настроен, оттого ещё приятнее смотреть его видео)) спасибо за видео !
Приятно слышать -)
Братишка, не сбавляй обороты, ты красавчик, приятно слушать
Спасибо, очень полезно!
Замечательно -)
Спасибо
согласен с комментариями ниже! очень интересный и поучительный формат. Спасибо автору)
На заметку: behavior: smooth не поддерживается в сафари.
Ильгиз Мавлютов не пугай начинающих разрабов, все раб , просто в npm найди полифил для behavior и все раб
Не поддерживается в Safati, Safari на iOS и IE. Однако, есть полифилл. Используй его и все будет. github.com/iamdustan/smoothscroll
Я как обычно половину не понял но очень интересно.
Лайкос однозначно!)
спасибо за данный видеоролик!
Интересный урок, спасибо!
Вот это офигеть крутая штука получилась! Взял себе на вооружение)))
Благодарю -)
Гребаный волшебник😅👍👍👍👍👍
Я только учусь -))
Прикольная штука, нраицца) Счас добавлю в текущий проект, думаю заказчику тоже вкатит)
Круть!)
Спасибо, огромное) Очень круто!
Здорово
Благодарю
prosto neveroyatno ya dumayu cto eto prosto filosofiya
Классное видео, непонятно, почему так мало просмотров
Очень полезно, большое спасибо! ^^
Всё очень круто. Но только кнопка подписка мешала смотреть на кнопку. Спасибо за урок. Удачи вам!
Круто, спасибо !
Спасибо -)
thnx a lot
Welcome -)
а подпрыгивание элемента при 100% скролле мы превращаем из недокументированного бага в фишку =))
Все юзеры мака на каждом сайте сталкиваются с этой «фишкой»))
Вот если бы еще это все было на ванильном js вообще цены не было!
Кстати было бы очень не плохо файлики прикрепить
Ля, мама мия , яка ляля . Крч, очень классно выглядит . И тупой вопрос : 'Будет видос с обучением Wordpress или как учить нормально "
отличное видео! только не понятно, где в content взялась стрелочка? где её берут?
ругается на 4 строку в js не пойму что не так const pathLength = scrollUpSvgPath.getTotalLength();
Решила проблему?
Та же фигня, не понимаю почему
Новые ништяки! :3
Ага. И значок у тебя уже поменялся -))
задумка классная, на РС всё работает а вот на андроиде нет. Только круг на пол экрана виден и всё.
при 100%-м скроле вниз думаю было бы классно добавить чтоб ещё и стрелочка вверх загоралась оранжевым
Это уже на ваше усмотрение. Все данные у вас для этого есть.
Новая порция годнотищи )
Благодарю)
Ты красавчег без вопросов =) НО подскажи, что у тебя за кресло плиз =)
Samurai
привет, я пишу тебе по след поводу : несколько меяцев назад когда ты в конце видоса спрашивал подсказать что бы сделать, то я написал комент о том, что именно для новичка информация укладывается в голове не в виде тегов и свойств, а именно по разделам - вот набор тегов для меню, вот набор свойств для выравнивания по центру и т.д я рад что ты прислушался к моиму пожеланию снимать видосы конкретно дл каждой фишки, спасибо тебе;)
П.С. я думаю ты и сам заметил, что кол-во просмотров выросло в разы, ведь зачем мне смотреть марафон по верстке на 5 часов. если проблема просто в кнопке-бургер ?))
Не у всех, есть время на 5 часов это верно)
Видео очень крутое, как и весь контент. Виталий, я без наезда, но могу научить произносить th за 30 минут. Очень легко и просто. Если интересно пиши free of charge
крутое видео с крутой идеей
Спасибо
Очень круто объясняешь, но еще круче проговариваешь алгоритм написания JS (чтобы получить это, надо сделать это, что мне для этого нужно - ага) - просто удивительно. Это с опытом придет, или с помощью чего-то надо подтянуть??
Я бы сказал, что это озвучивание просто логики, обычной человеческой, подкреплённое знанием языка.
Что верстка, что js, в первую очередь пишутся в голове, а потом уже перепечатываются
@@prosto_razrabotka ответ, который может вогнать в грусть))))) Думал ты ответишь что-то типа "да конечно, чувак, вот книга, читаешь и становишься богом алгоритмов"))))))) Но видать не судьба))
@@s9219871110 «нет сынок, это фантастика»-))
Спасибо, большое, но увы, все работает, кроме заливки. Пошел искать ошибку.
а в какой программе вы работаете?
привет) у мен на компьютере этот метод (плавный скролл) работает, а на ноутбуке - нет)
А технические стримы планируешь? Просто есть один мелкий (но нетривиальный) вопрос по CSS
Можете задать его в телеграмм чате
Здравствуйте урок очень классно,
Не могли бы показать как сделать появления (плюс анимация) элементов при скролле.
На чистом js или с помощью библиотека
Если нужно сейчас, то забейте "анимация при скролле" на yt
топчик!!!
Благодарю
Побежал внедрять
Что то похожее для отправки формы, очень интересует.
Это как?
Сделай пожалуйста видео как frontend разработчику попасть в IBM
Самый сложный скролл топ который я видел, но по другому интересно не было бы)
Здравствуйте как поменять анимация в телефон Vivo Y17 как у айфон
Мне как для новичка не понятна куда нужно поместить код в html, после всего контента или в конце, после всех блоков?
Чем ваш первый вариант отличается от второго?
@@prosto_razrabotka извиняюсь ,напутал. Поместить нужно в body, после основного контента? Еще бы хотелось в розлике услышать про то как он будет работать на мобильной версии.
У меня у одного проблемы? Оранжевый круг кривее серого, по итогу ничего не работает.. Хотя все делал по уроку(
Забейте, я олух..
Добрый день! Подскажите, пожалуйста, плагин для gulp, который может переносить классы из html в scss!
csstractor вроде как то так, загугли
@Просто:разработка а вы ссылку на git не даете? просто svg хотел вытащить
У меня почему-то и в хроме не работает behavior: smooth. При клике моментально переносит на верх страницы
Тут кстати можно задать стиль для html для плавной прокрутки
привет!
ахха
Я бы попросился к Виталику работать, да сдается мне перетряхивает он там своих миньенов как положено, а Виталик?
Когда уроки по js?
Вам нужен официальный заголовок - Уроки по js? Другой причины я просто не вижу, поскольку последние 5-6 видео и есть практическое изучение js, самых основ.
@@prosto_razrabotka соре, просто недавно с самого первого видео смотреть начал, и еще не дошел до более свежих
+
+
большое спасибо за классный урок - "лайк" однозначно
к сожалению, у меня при прокрутке заливка появляется сразу полностью, а не постепенно (как в видео).
пожалуйста, помогите найти ошибку - вот код:
const ofs = 100;
const scrollUp = document.querySelector('.scroll-up');
const scrollUpSvgPath = document.querySelector('.scroll-up__svg-path');
const pathLength = scrollUpSvgPath.getTotalLength();
scrollUpSvgPath.style.strokeDasharray = '$(pathLength) $(pathLength)';
scrollUpSvgPath.style.transition = 'stroke-dashOffset 20ms';
const getTop = () => window.pageYOffset || document.documentElement.scrollTop;
// function #1: updateDashoffset
const updateDashoffset = () => {
const height = document.documentElement.scrollHeight - window.innerHeight;
const dashoffset = pathLength - (getTop() * pathLength / height);
scrollUpSvgPath.style.strokeDashoffset = dashoffset;
};
// function #2: onScroll
window.addEventListener('scroll', () => {
updateDashoffset();
if (getTop() > ofs) {
scrollUp.classList.add('scroll-up-active');
} else {
scrollUp.classList.remove('scroll-up-active');
};
});
// function #3: click
scrollUp.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
Залейте на кодпен и заходите в телеграмм чат, там разберёмся
@@prosto_razrabotka - спасибо за ответ.
вот код, который я набрал по видео:
codepen.io/vklabua/pen/ZEQowbP
на CodePen'е такой же эффект (((
Я писал - зайти в телеграм чат, а не сюда приложить! -)
И нет, вы не всё правильно переписали. В строке с strokeDasharray - используется экранирование. Там угловые кавычки и фигурные скобки
@@prosto_razrabotka - большое спасибо за Ваш ответ, Виталий . исправил - и все заработало )))
спасибо за Ваши уроки: просто, интересно и с изюминкой - по ним действительно хочется учиться )))
"просто", "просто", "просто", сомневаюсь, что это свойственно для нормальной речи