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

Установка:
Файлы архива закачиваем в папку totop
В css ставим:

Код

.upTop {
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {
  background:#777777 url(/totop/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {
  display:none;
  background:url(/totop/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;
}

Ставим на страницу перед тегом </body>

Код

<div class="upTop blue">
<div class="upTopZone"><p>наверх</p></div>
<div class="upTopButton"></div>
</div>
<script type="text/javascript" src="/totop/uptop.js"></script>

Чтобы изменить основной цвет кнопки под свой дизайн, измените в html коде, класс blue на нужный из списка ниже:

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

Всего комментариев: 4

Порядок вывода комментариев: