Кнопка вверх (new)

Всем привет

Посещают всякие странички, в том числе и чрезвычайно приочень длинноватые, и чтоб не ворочать колесиком мыши, либо же просто не волочить непрерывно скролл есть таковой помошник, как клавиша "вверх". Конкретно они без заморочек перемотают нас верх странички. Одну из таковых я и предлагаю вам поставить на собственный сайт, она чем то схожа на клавишу вконтакте, но главное стилевое решение было взято с сайта 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://bambun.ru/images/goup.png)no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {  
  display:none;
  background:url( http://bambun.ru/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

Данный код копируем и вставляем куда желаем, главное в тело странички, сможете поставить перед тегом


  наверх
  
  


Установка JS

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



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

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый