Кнопка «вверх» для сайта своими руками.

Автор Liza Merichenko
Кнопка «вверх» для сайта своими руками.

Привет всем на.

Союз Сергей. Белоусов в этом видеоуроке я хочу вам продемонстрировать как я буду делать кнопочку вверх для своего блога на будет располагаться вот здесь и по клику на неё страница будет плана столица вверх. Давайте приступим для начала добавить кнопку на страницу добавляем Button с классом бтн сохраняем девочку нас добавилась, но её пока, что не видно так как на неё ещё не написано ни какие стили.

Давайте напишем.

ПДН оп первым делом iOS position fixed сделаны фиксированный отступ от нижнего края сделаем 50 пикселей от правого края 100 пикселей ширина 50 высоту тоже 50 пикселей Border 50% сделаем её круглый и добавим рамочку 2000 цветом cc0 кнопочку в цвет три тройки в принципе всё пока что. А еще задевать отдадим за индекс. Тюмень нас тоже бы она была поверх. Всех элементов на странице также добавил внутри — это кнопочки стрелочку при помощи всегда элемента автор контент стоимость ширина 10 пикселей примерно высота тоже 10 пикселей Border Border Top 2000 или солить CC и border-right сделаем такой же развернем стрелочку при помощи transform rotate примерно на 45 градусов из позиционирования посвящен. Абсолют позиционируем внутри нашей кнопочки. Так примерно 4 пикселя. Ботан 0 так вот a0001 чтобы ананаса централа с пациентом сохраним смотрим появилась наша кнопочка только надо чуть-чуть приподнять стрелочку вверху сделаем топ-0 что-то. Не хочет она сравнивается наверное где-то ошибка так да забыл поставить точку с запятой 400 таки. Да всё верно увидим настроилась кнопочном при скролле страницы, но остается на своем месте. Теперь давайте сделаем чтобы при нажатии на неё страница всегда просто вверх ещё тусю рамочку уберём. Давайте напишем auth0 импортант всегда. Ираклион приступим написано к написанию кода так. Давайте напишем, что будет происходить по клику на эту кнопку выберем btn Click function приклейки на эту кнопочку у нас будет ходить у будем анимация Animation Scroll Top фигурной скобки добавить 0 также добавим для тега HTML так как в разных браузерах и они работают по-разному где-то срабатывает на body-scroll-lock — это собака mail.ru поэтому мы добавим сразу два и всё — это это будет происходить в течении 1 секунды. Давайте сохраним раскрой на стороне нужно нажать кнопочку и видим, что страница на скролле вверх по нажатию на кнопку всё хорошо работает теперь давайте кнопочку на. Первом экране скроем и после пару сотен пикселя. И сверху она у нас будет плавно появляться — это мы сделать при помощи CSS зададим. Ботом минус 50 пикселей чтобы она у нас уже ушла вниз за пределы экрана и transition транзишн примерно 40 4 секунды. А когда будет добавляться Class Active мы будем делать. Ботом 54 сохраним p20 напиши музыку рекорд то, что при скролле страницы будет происходить у нас проверка если Windows Scroll Top будет больше примеры 200 то мы будем добавлять в квас. Актион иначе элсо будем удалять Class Active. Сохранил на её видим, что прислали у нас сделать по нашей появляется то он уже он у неё на странице вверх ещё раз на этом всё. С вами был. Сергей Белоусов. Всего доброго. До связи.

0 комментариев
0

Читайте также