Как сделать кнопку наверх css
Кнопка «Вверх» играет большую роль в улучшении удобства пользователя, особенно на тех страница которые сильно нагромождены контентом. А так как в настоящее время контент для сайта самое главное, то его на страницах, как правило, становится все больше и больше и самым лучшим способом перенаправить посетителя вверх страницы являются различные специальные кнопки, как сделать кнопку наверх для своего сайта мы рассмотрим в данной статье.
Для чего нужна данная кнопка и в каких случаях ее лучше всего использовать
Когда на странице сайта расположено большое количество контента пользователь ознакомившись с ним и промотав страницу до определенного момента или до самого низа, часто начинает скролить ее верх, чтобы увидеть навигационные ссылки расположенные в верхней части страницы и\или произвести какие-то действия.
Чтобы добавить удобства пользователям и в целом улучшить юзабилити своего сайта лучше всего использовать для сайта кнопку вверх, нажав на которую пользователь автоматически перенаправляется в верхнюю часть страницы.
1. Простая кнопка «Наверх» без JavaScript
Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
Недостатки:
— Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.
— Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.
Плюсы данного вида кнопки:
+ Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.
2. Кнопка наверх с помощью jQuery
Кнопка реализована достаточно просто. Для ее функционирования понадобится библиотека jQuery, небольшой скрипт содержащий события jQuery, определенные стили и тег DIV содержащий сам текст и необходимый ID.
JQuery JavaScript код:
Представленный ниже код вам необходимо вставить переде тегом на всех страницах вашего сайта. Если библиотека jQuery уже подключена к вашему сайту, то первую строчку добавлять не нужно.
Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.
Для вызова кнопки добавьте следующий HTML код перед тегом
Кнопки | CSS
Простая HTML кнопка для сайта
Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.
Как сделать кнопку на CSS
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»
Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.
Код кнопки для сайта
Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.
Кнопка с градиентом
Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].
А вот всякие перемещения работают на ура.
Довольно популярно разделение кнопки на два цвета
Красивые кнопки CSS
Кнопки «Скачать» CSS
Стилизация кнопок с помощью CSS
Анимированная кнопка: «свечение текста»
Стиль кнопок с бликами
Кнопки меню
Объёмная кнопка CSS
Вдавленная кнопка
Выпуклая кнопка HTML
Круглые CSS кнопки
Анимированная кнопка CSS
Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].
3d кнопка CSS
Оформление кнопок
Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.
Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.
Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.
98 комментариев:
damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html
В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )
background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
Может что подскажете. Заранее огромное Спасибо!
a.button_main_ico <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover <
background-color: #BABABA;
>
a.button_main_ico:focus <
background-color: #D8D8D8;
>
a.button_main_ico:focus:hover <
background-color: #DFDFDF;
>
a.button_main_ico:before <
content: url(../ico_L_ready.png);
> NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;
a.button_main_ico:before,
a.button_main_ico span <
content: url(../ico_L_ready.png);
vertical-align: middle;
>
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.
в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка
Тоже но без иконки:
Кнопка
В CSS
a.button_main <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover <
background-color: #BA0000;
>
a.button_main:focus <
background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover <
background-color: #DF000;
>
Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.
Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(
Кнопка «ВВЕРХ» для сайта
Чтобы пользователь дойдя до конца страницы не уходил с сайта, применяют несколько уловок, например, размещают блок с похожими статьями, или плавающее меню, или ссылку к началу веб-документа. Как её сделать? Пример: ВВЕРХ.
Для того, чтобы она перемещалась вместе с прокруткой страницы (см. CSS) и появлялась не сразу, а только после прохождения первого экрана (см. JavaScript) добавим перед
JavaScript:
Стиль CSS:
Для Blogger все три части кода вносим в гаджет HTML/JavaScript, который нужно добавить сразу под «Сообщения блога», если боковая колонка расположена справа. 
Или в левую панель, если она присутствует. 
125 комментариев:
Мич Класс! Спасибо! Суперовская фишка! NMitra Да, мне тоже понравилась. Rain Спасибо очень не хватало этой функции. NMitra По другому спозицианируйте элемент:
#back-top <
position: fixed;
position: fixed; left: 0%; top: 97%;
>
А то у вас кнопка наезжает на левое меню. И либо добавите скрипт, либо
Цвет квадратика определяется строкой:
background: #ddcca3 url(http://www.mundodarkness.com.br/gd/topo.png) no-repeat center center;
Уберите #ddcca3 совсем.
При наведении на ссылку фон квадрата:
#back-top a:hover span <
background-color: #777;
>
Аналогично: либо удалите, либо измените на свой.
#back-top a:hover <
color: #000;
>
А здесь http://shpargalkablog.ru/2011/04/fotoshop-s-nulya.html небольшой урок по Фотошопу, хотя вам понадобятся только карандаш да пипетка.
После того, как выберите/нарисуете картинку, загружаете её в Blogger и меняете адрес с http://www.mundodarkness.com.br/gd/topo.png на свой. Rustem Zakirov Спасибо огромное. Rustem Zakirov Не, всё таки вы самая лучшая. Ваш блог это чудо. Я столько перерыл в инете в поиске помощи, но не нашёл за всё время столько, сколько у вас за несколько дней. Самое главное оперативные ответы на вопросы. Ещё раз спасибо и удачи. NMitra Благодарю за столь лестный отзыв))) PANIC а можно как ВКонтакте сделать кнопку? чтобы не в определенное место ставить ссылку «наверх», а чтобы та двигалась вместе с прокручиванием страницы?
кстати, интересная стрелка у Вас внизу) NMitra Конечно. См. статью, где задаём
style=»position: fixed; left: 93%; top: 97%;» PANIC но его нельзя на все страницы поставить?
Чтобы не использовать скрипт, но оставить всё те же стили:
Гунь Ольга СПАСИБО. NMitra Рада помочь! Laterna Magica Наталья, помогите, спасите мой экспериментальный блог ))
Для поиска используйте сочетания клавиш CTRL+F и в открывшееся окошко вводите h2.
Чтобы выровнять твит справа, найдите примерно такой код и добавьте выделенное жирным
Обязательно спрашивайте, отвечу. Иначе вконец можно запутаться. Я не всегда верно могу оценить знания читателя, поэтому могу что-то пропустить. О нас Прошла по ссылке. Вставила рекомендуемый код, выделенный синим. Потом вставила после код твита. Но на странице он не появился. NMitra Я поняла в чём дело, там несколько вхождений. Уберите предыдущие изменения. И добавьте выделенное жирным
» data-text=» » data-count=»horizontal» data-lang=»ru»>Твитнуть О нас Наталья! Мой случай, наверное,клинический! Сразу нашла куда вставить( ценный Ваш совет по поиску).Скопировала код. вставила. Опять ничего.Вставила другой. Ничего. Уже Вас достала! И все таки хочу вставить «поделиться», «наверх» и «твит». NMitra Зайдём с другого края. Заведите какой-нибудь тестовый блог. Установите этот шаблон. Посмотрите как там, ориентируясь на комментарий 30 и 32.
#back-top <
position: fixed;
right: 93%;
bottom: 0px;> NMitra Два раза одна и та же строка в коде. Якушевская Юлия Сергеевна Спасибо, но стрелка так и не появилась. Как я понимаю, то она должна появиться на главной странице? NMitra Ой, только сейчас заметила: строчки
вот блог http://bredstory.blogspot.com/ Irinka Story Ура-ура. Я в кодах,скриптах и д.т вообще ни бум бум а с Вашей помощью получилось. И цвет кнопочки подойдёт! Спасибо. y.trubchyk все. ) сделал..делаем новое что-то) Спасибо большое. NMitra Без моей помощи обошлось! На выходных, как правило, вне компьютера. Марсель Сакаев Спасибо огромное за кнопочку. А какой параметр отвечает за появление кнопки. Сейчас она появляется очень быстро. Хочу сделать так, чтобы она появлялась тогда, когда вниз прокручено 80% материала. NMitra В скрипте замените
if ($(this).scrollTop() > 100) <
if ($(this).scrollTop() > 1000) <
Или любую другую цифру. Марсель Сакаев Спасибо огромное )) У меня нет слов, чтобы выразить свою благодарность )) NMitra Как приятно это слышать) Irinka Story У меня всё распрекрасно работало, а позавчера заметила что сама стрелка пропала. Загрузила бекап когда всё работало, но все равно——(
Что делать? http://potapenkoira.blogspot.com/ NMitra С сайтом, откуда я позаимствовала рисунок, случилось какая-то неприятность. Замените http://www.mundodarkness.com.br/gd/topo.png на другой адрес, например, на http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png Irinka Story Спасибо огромное за помощь и мгновенную оперативность. а как такие стрелочки можно поискать, чтоб по дизайну подходило? Анонимный Доброго времени.
Вопрос такой, можно ли это сделать на обычной странице сайта?
У меня почему-то ничего не выходит. Хотя в html я не спец.
У меня только вверху в центре появляется (при прокрутке) ссылка «Наверх» и исчезает. Переместить ее не получается, а картинки, так вообще нет.
Вот что у меня получилось и в чем ошибка?
Если не трудно, подправите код.
Все <> заменил на *, а то не принимало сообщение.
*script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js»**/script*
// hide #back-top first
$(«#back-top»).hide();
// fade in #back-top
$(function () <
$(window).scroll(function () <
if ($(this).scrollTop() * 100) <
$(‘#back-top’).fadeIn();
> else <
$(‘#back-top’).fadeOut();
>
>);
// scroll body to 0px on click
$(‘#back-top a’).click(function () <
$(‘body,html’).animate( <
scrollTop: 0
>, 800);
return false;
>);
>);
#back-top a <
width: 70px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
#back-top a:hover <
color: #000;
>
#back-top span <
width: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddcca3 url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png ) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
#back-top a:hover span <
background-color: #777;
>
*div *
*div style=»margin:0;padding:0;position:absolute;left:185px;top:4505px;width:459px;height:5px;text-align:left;z-index:0;»*
*img src=»http://shpargalkablog.ru/2011/05/%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B01_files/img0039.png» alt=»» title=»» style=»border-width: 0pt; width: 467px; height: 13px;»**/div*
*/div*
*/body*
*div style=»display: none;» **a href=»#»**span**/span*Наверх*/a**/div*
w3.org.ua
уроки front-end и back-end
Рубрики
Кнопка «Вверх» с плавной автопрокруткой
Учитывая популярность мобильных устройств и адаптивной верстки, сайты стали растягиваться в длину на несколько экранов, соответственно, когда текст длинный, то прокрутить страницу вверх уже тяжело. Для удобства пользователей добавляют кнопку «Вверх». Однако простая реализация кнопки с помощью якоря, прокручивает страницу рывком. Использование JS или jQuery помогает решить эту проблему сделав кнопку плавной прокрутки.
Предложенные решения на множестве сайтов обладают рядом недостатков. Наиболее часто встречаются решения в которых кнопка видима постоянно, даже если нет полос вертикальной прокрутки. Второй недостаток – необходимость добавлять в html код страницы сторонние элементы, которые формируют кнопку вверх вручную. Третий недостаток – ограничение на использование элементов. В одних случаях это только гиперссылка, в других только изображение.
Просмотрев кучу скриптов, выбрал наиболее оптимальный и дописал необходимый функционал. Итак, написанный скрипт формирует кнопку вверх, когда пользователь прокручивает страницу вниз более чем на один экран. Появление кнопки – плавное. Сама кнопка – это гиперссылка, в которую вы можете добавить любой элемент: и блоки, и изображения.
Добавлять в HTML код ничего не нужно. Кнопка добавляется автоматически. Итак, как добавить кнопку Вверх на сайт? Вначале подключите в head библиотеку jQuery.
Затем подключите ниже библиотеку с кодом кнопки.
Для оформления кнопки добавьте в CSS два класса, которые описывают обычное состояние ссылки и ее hover состояние.
Как обычно, посмотреть решение можно на CodePen
See the Pen ZWWrdP by Alex (@Asmodey) on CodePen.
или скачать готовое с GitHub.
Еще статьи:
Кнопка «Вверх» с плавной автопрокруткой : 2 комментария
Кстати, для тех, кто только изучает JS (для меня), использование jQuery, делает код непонятным((
HTML кнопка – незаменимый помощник для навигации по сайту
Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Как сделать кнопку в HTML?
Кнопки для сайта HTML создаются одним из двух способов:
2. С помощью тега button :
В результате получаются две одинаковые кнопки:
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Виды кнопок html
1. Кнопка-ссылка HTML
Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html ) может быть создана с помощью ссылок « якорей ». Обычный « якорь » имеет следующий вид:
Такой « якорь » невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к « якорю », используется следующая команда:
Нажатие на название кнопки, моментально переводит курсор к « якорю ».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
Выглядит это следующим образом:
2. Кнопка Submit
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
3. Кнопка Reset
Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
4. HTML кнопка с картинкой
В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код: