Кнопка вверх для прокрутки страницы сайта в начало
Процесс создания кнопки вверх начнём с HTML-разметки:
В качестве изображения будем использовать SVG-изображение, которое установим с помощью CSS как background-image :
В этом коде мы элементу устанавливаем фиксированное позиционирование, то есть position: fixed . Для определение того, где должен располагаться элемент относительно краёв окна браузера, мы задаём следующие свойства: right: 20px и bottom: 0 .
Выравнивание псевдоэлемента ::before по центру внутри .btn-up выполним с помощью CSS Flexbox. Для этого .btn-up установим следующие свойства: display: flex , align-items: center и justify-content: center .
Шаг 2. Написание JavaScript кода
По умолчанию кнопка вверх не отображается. Показывать кнопку на странице будет только после того, как страница будет прокручена больше чем на 400px.
При нажатии на кнопку .btn-up будем прокручивать страницу к началу с анимацией.
Для выполнения этих действий нам необходимо написать JavaScript код. Выполним это на чистом JavaScript:
Здесь мы оформили весь код в формате объекта. Для выбора необходимых элементов на странице мы использовали здесь метод querySelector , а для добавления обработчиков событий – свойство DOM-объекта onclick и метод addEventListener . В результате мы получили следующее:
Использование другого SVG-изображения
В примере, приведённом выше, мы использовали SVG-изображение. Вместо этого изображения можно использовать любое другое:
Кроме изменения SVG-изображения, мы также поменяли здесь некоторые другие стили:
Изменение цвета фона и других свойств кнопки
Для изменения цвета, размера, расположения и других свойств кнопки, необходимо просто отредактировать CSS правила, представленные выше.
Пример квадратной кнопки, в которой в качестве цвета фона ( background-color ) используется #3aa111 :
Кнопка с плавным появлением и скрытием
Чтобы кнопка плавно появлялась и исчезала можно воспользоваться CSS-переходами.
Для этого в CSS необходимо внести следующие изменения:
Также необходимо отредактировать JavaScript код, например, так:
Для добавления и удаления классов у элементов мы в этом коде использовали методы add и remove объекта classList . При этом часть этих действий выполняли не сразу, а спустя некоторое время, используя для этого метод setTimeout .
Выезжающая снизу кнопка вверх
В этом примере сделаем так, чтобы кнопка вверх появлялась снизу. Выполнять это будем с помощью CSS-свойств transform и transition . Кроме этого, SVG-изображение вставим с использованием тега <svg> :
Простая кнопка «Наверх» для удобной навигаци по сайту
Ігор Петренко Опубліковано 29.7.13 | Оновлено 2018-11-02T19:31:28Z 2 коммент.
Материал о том, как на Ваш сайт установить кнопку перемещение на верхнюю часть вашего сайта. Проще говоря, кнопка «Наверх» для вашего блога / сайта. Для Вас, дорогие друзья, подготовлено четыре способа реализации.
Кнопка с эффектом при наведении
Первый, который у меня стоит, имеет эффект при наведении курсора, но скроллинг (перемещение) является динамичным. Состоит такая кнопка из такого кода:
Кнопка простая, без эффектов
Теперь предлагаю Вам ознакомиться со вторым видом. Здесь отсутствует какой либо эффект, но для перемещение по странице, этот код в самый раз. При том, этот код на загрузку страницы никак не будет влиять.
Чтобы кнопка имела Вашу собственную картинку, замените ссылку на изображение ( выделено красным ), на свою. Или скопируйте ссылку на подорванные мною изображение, и вставьте ее в выше предложенный код.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Напомню, что вставлять код и стиль кнопки нужно перед тегом </body>, или перед последним тегом </div> в вашем шаблоне (для html), а также после </footer> (html5).
Вариант в сплавным скроллингом, на основе jquery
Собственно, подключаем jquery, с хранилища Google, код помещаем после </head>, но перед <body>:
Затем вставьте этот код, перед тегом </body>.
И вновь, вставьте свою ссылку на изображение, заменив красный текст.
А также, если Вы хотите, что бы скрипт toTop.js загружался с вашего сайта, то советую Вам создать файл в любом текстовом редакторе с таким текстом:
Теперь сохраните файл, так чтобы его название и расширении было toTop.js , если всё готово, то загрузите файл на сервер. Не забудьте заменить ссылку.
Текстовая кнопка
Для первых двух способов
Для начала Вам нужно изменить код в css:
2 шаг
заменить на код с фоновым цветом текста
3 шаг
добавить в стили такой код:
4 шаг
изменить код
добавив текст кнопки
Теперь для текстовой кнопки , с эффектом плавного скроллинга:
Для начала замените код css на эти строки:
Нужно также изменить код ссылки:
Конечно, Вы можете изменить текст, а также его цвет и фон свой. Так, что экспериментируйте, дорогие читатели 😉
Делаем кнопку «Наверх» для сайта без плагинов
Приветствую дорогие друзья. Сегодня я покажу, как сделать кнопку наверх на сайте. Так уж получилось, что шаблон моего блога не был изначально снабжен этой полезной функцией, и посетители не могли быстро переместиться из нижней части статьи в верхнюю. Поэтому, одновременно с созданием такой кнопки у себя, я расскажу как это сделать вам (Может быть у вас такая же проблема и вы не знали как ее решить).
В статье будут следующие части:
Для чего нужна эта кнопка?
Сказать откровенно, миллионы сайтов живут без подобной кнопки. Ничего критичного в её отсутствии нет, но применение этого элемента может принести определенную пользу, как для посетителей, так и для вас, как для владельца ресурса.
Польза для посетителей
Страницы сайтов нередко перегружены контентом. Длинные и подробные статьи заставляют посетителей спускаться все ниже и ниже, прокручивая текст колесиком мыши. В самом конце их ожидают еще и десятки комментариев и для того, чтобы добавить свои, им приходится проделать еще больше работы.
Пока мы заняты чтением, такая прокрутка не особо утомляет. Но возвращаться назад уже не так весело и, вместо того, чтобы вернуться вверх и погулять по другим разделам вашего сайта, пользователь просто закрывает его.
Использование стрелки вверх для сайта, позволяет сделать возвращение к верхнему меню быстрым и комфортным.
Польза для сайта
Польза для сайта вытекает напрямую из предыдущего текста. Кнопка упрощает навигацию по страницам и улучшает поведенческие факторы для вашего ресурса, так как пользователи ведут себя более активно и больше внимания отдадут вашим материалам.
В свою очередь, удобная навигация и хорошие поведенческие факторы приводят к росту авторитета в глазах поисковых систем и, соответственно, к росту позиций в результатах поиска.
Простая кнопка наверх для сайта html
Я рассмотрю два способа снабдить ваш сайт такой кнопкой. Первый будет ориентирован на простые сайты, для которых нет возможности или желания подключать какие-либо дополнительные библиотеки или Javascript.
Для реализации будет достаточно стандартного функционала языка разметки HTML, дополненного CSS стилями. Кнопка вверх будет действовать как обычная ссылка, отправляющая посетителя к началу страницы.
- Простота и легкость настройки;
- Не нужна поддержка библиотек и скриптов.
- Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
- Перемещение вверх происходит не плавно, а мгновенно, рывком.
Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.
Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).
Дальше вам необходимо прописать стили созданного нами класса кнопки buttonup. Для этого открываем файл style.css и добавляем в конец следующий код:
Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.
Плавающая кнопка наверх для сайта
Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:
- Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
- Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
- Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).
Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).
В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:
1. Подключение библиотеки jQuery
Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.
Для подключения библиотеки jQuery, вам нужно прописать в разделе <head></head> вашего сайта следующую строку:
2. Подключение скрипта, выводящего кнопку
Код скрипта можно вставить двумя способами:
- либо поместить его целиком между тегами <head></head>,
- либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.
Первый вариант проще, второй, на мой взгляд, удобнее.
Вот сам скрипт (автор Тимур Камаев wp-kama.ru):
Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.
Если вы будете использовать для скрипта отдельный файл, как это сделал я, то в него помещаете код, находящийся между тегами <script></script>, сами теги копировать в файл не нужно. Файл размещаете у себя на хостинге.
Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:
Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.
Картинка для кнопки
Для того, чтобы изображение кнопки менялось, файл картинки должен состоять из двух половинок, на одной изображается обычная стрелка, на другой активная стрелка (под наведенным курсором). Посетителю одновременно показывается только одна половина. У меня верхняя стрелка сделана полупрозрачной, вторая непрозрачная (яркая).
Файлы стрелок с изображения ниже можно скачать здесь.
Заданные в скрипте цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту — первая стрелка из примера). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.
Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.
Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.
Код можно упростить, если удалить из него вот эту строку:
Она отвечает за изменение отображаемой части картинки при наведении курсора и если ее убрать, то кнопка всегда будет выглядеть одинаково. В этом случае вам не нужна будет картинка с двойным изображением, поставьте любую стрелку.
Несколько вариантов стрелок я сделал (ссылка на архив с ними выше), а в интернете вы можете отыскать много готовых.
Как видите, создать красивый сайт самому несложно. На этом на сегодня все.
Кнопка «наверх». Как сделать кнопку вернуться наверх?
Наверняка вы замечали на многих вебсайтах есть кнопка «наверх». Этот элемент просто необходим для длинных вебсайтов, или, например, блогов. Часто пользователи быстро скроллят сайт или статью что бы узнать, есть ли там то, что их интересует, и только потом возвращаются на начало и читают статью. Конечно, они могут вернуться просто поскролив колесиком, или с помощью панели справа. Но согласитесь, что гораздо удобнее нажать кнопку «наверх» и быстро переместиться в самое начало сайта.
Раз мы определились для чего она нам нужна, давайте приступим к её реализации. Если вы хотите сразу посмотреть готовый код с примером — добро пожаловать на codepen .
Кнопка «наверх» — HTML часть
HTML код для нашей кнопки достаточно простой. Мы всего лишь создаем <div> , в который мы поместим иконку стрелки вверх. Я буду использовать svg-код иконки, но вы можете использовать картинку, как всегда, с помощью тега <img />
CSS часть конпки
Тут так же ничего сложного нет. Указываем для кнопки position: fixed, что бы кнопки всегда отображалась на экране при скролле. Так же определяем где будет находиться кнопка. В моем случае, кнопка «наверх» будет находиться в правом нижнем углу, поэтому пишу bottom: 50px, right: 50px.
Так же важно показывать кнопку только после начала скролла, ведь от неё нет никакого смысла, если пользователь и так находиться вверху страницы. Для этого скроем кнопку за экраном с помощью bottom: -50px, и добавим для неё класс active, у которого bottom равно 50px. С помощью jQuery будем добавлять этот класс после начала скроллинга.
Javascript (jQuery) часть кода
Как и говорилось выше, показывать кнопку будем только после начала прокрутки. Для того, что бы после нажатия кнопки возвращать экран на верх сайта с анимацией — будем использовать код с этого урока .
Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их на Youtube канале, или пишите мне в Telegram, с радостью помогу.