Главная » (X)HTML, CSS » Кнопка вверх для сайта, как в VK.COM
Фев
17

Кнопка вверх для сайта, как в VK.COM

Всем привет. Однажды я уже писал о том как создать кнопку вверх для сайта, вот ссылка, но сегодня все на много проще. Многим почему-то нравится кнопка сбоку как в соц. сети VK.COM. Сегодня я покажу вам как сделать такую кнопку потратив на все деяние около 5 минут. Последнее время я много времени потратил на разработку интернет-магазина KPeople.com.ua, и не исключение что именно для него я и сделал такую кнопку. Можете перейти туда, посмотреть.

Кнопка вверх для сайта

Кнопка вверх для сайта


Абсолютно все равно где вы будете ставить кнопку, что на блоге WordPress, что на любой другой CMS. Все действия одинаковы. И так, сразу после открывающего тега BODY вставляете:

[code]<a name=»top»></a>
<div class=»top_up» onclick=»location.href=(‘#top’)»>
<span style=»color: black; font-size: 10px;»>





Наверх
</span>
</div>[/code]

А в файл стилей STYLE.CSS добавляете стили:

[code].top_up {
width:50px;
height: 100%;
text-align:center;
position: fixed;
background: #fff;
cursor:pointer;
left: 0;
padding-top:5px;
}
.top_up:hover {
background: #E4EFF2;
}[/code]

Данная кнопка вверх для интернет-магазина была реализована самым простым способом. В моем варианте нету стрелочек вверх-вниз (как в vk.com). Но имея желание, можно сделать очень интересный вариант. Я люблю минимализм.
Изменив цвета (background: #…;), расположение ( left: 0;), вид курсора (cursor:pointer;) сделайте что-то действительно интересное для себя.
Свои варианты кнопок (ссылки на сайты) кидайте в комменты, очень хочется посмотреть на ваши творения ;)



Понравилась статья? Сделай приятно ее автору, поделись с друзьями:


Хотите получать обновления данного блога на EMail?

Введите адрес Почтового Ящика:




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