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

Кнопка наверх

Все привет

Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта kinopoisk. Посмотрим демо:

Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта.


Установка CSS

Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)

Код
.upTop {  
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {  
  background:#777777 url(http://mvcreative.ru/example/17/images/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {  
  display:none;
  background:url(http://mvcreative.ru/example/17/images/upbg.png) repeat;
  width:100px;
  height:100%;
  cursor:pointer;
}
.upTopZone p {  
  background:#777777;
  font-size:12px;
  width:63px;
  height:27px;
  margin:0;
  position:fixed;
  top:10px;
  left:37px;
  color:#fff;
  font-family:"tahoma", "verdana", "arial";
  line-height:25px;
  text-align:center;
  text-shadow:1px 1px 1px #000000;
}
@media screen and (max-width:1024px) {
  .upTopZone {
  display:none !important;
  }
}    .blue .upTopButton, .blue .upTopZone p {
  background-color:#3fa3e1;
}
.green .upTopButton, .green .upTopZone p {
  background-color:#60bf3a;
}
.red .upTopButton, .red .upTopZone p {
  background-color:#ca2929;
}
.orange .upTopButton, .orange .upTopZone p {
  background-color:#ef990b;
}
.purple .upTopButton, .purple .upTopZone p {
  background-color:#b053a0;
}
.grey .upTopButton, .grey .upTopZone p {
  background-color:#777777;
}

Установка HTML

Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body>

Код
<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <div class="upTopButton"></div>
</div>

Установка JS

Вставляем данный код также перед тегом </body>

Код
<script type="text/javascript" src="http://mvcreative.ru/example/17/js/uptop.js"></script>

На этом установка кнопки вверх для сайта закончена, по традиции я предлагаю несколько цветовых схем, чтобы каждый мог без труда применить сразу, полностью готовое решение у себя на сайте. Чтобы изменить основной цвет кнопки наверх, измените в html коде, класс blue на нужный из списка

  • blue - голубой
  • green - зеленый
  • red - красный
  • orange - оранжевый
  • purple - пурпурный
  • grey - серый
Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Веб детали html css js ∫ Просмотров: 23200 ∫ 02.02.20134.3
» Оцени и добавь:
оцени статью
4.3
19 Комментариев Поделись своим мнением
#19 Написал cech, 23.01.2014 12:17
Цитатнуть
Цитата Александр
левого края до конца кнопки вверх неактивны

да как же они могут быть активны если изменили параметр высоты у всей области кнопки вверх?) пишите в ЛС вк...
#18 Написал Михаил, 07.12.2013 20:18
Цитатнуть
в мобильных браузерах эту кнопку не видно
#17 Написал Анатолий Мешков, 19.11.2013 17:09
Цитатнуть
все получилось но долго тупил с css прикинте забыл что ксс у меня вынесен отдельным файлом,а так вообще супер!
#16 Написал Анонимный гость, 15.07.2013 04:05
Цитатнуть
Зачем нужна эта кнопка? Все ее ставят на сайты после увиденного в ВК, а на самом деле она на**й не нужна!
#15 Написал данил, 27.05.2013 00:01
Цитатнуть
А как сделать кликабельную область пошире, как в вк?
#14 Написал Андрей, 02.05.2013 21:38
Цитатнуть
А как этот скрипт подключить на тот же WordPress? Я пробовал, но что то не получилось...
#13 Написал Dima, 25.02.2013 21:15
Цитатнуть
Очень хорошая статья, все очень понятно и доступно!!! Искал В Интернете долго, а тут так ПРОСТО!!!
#12 Написал Арт-директор, 21.02.2013 17:17
Цитатнуть
Отлично поставил, все супер и в IE работает стабильно, даже не обязательно вставлять в тело сайта перед </body>
Я вставил тупо в нижнюю часть сайта и HTML код и скрипт и все работает)
Обычно такие штуки всегда туда вставляю, что бы не вставлять отдельно на каждую страницу сайта)
В общем спасибо!
#11 Написал Артём, 15.02.2013 10:00
Цитатнуть
Да нет поставил на все страницы, посмотрю может что то и пропустил
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина