Кнопка наверх для ucoz(7 видов)

Рейтинг:4.0

Отличный скрипт для вашего сайта, который представлен в 7 вариантах,что повышает шансы вписывание кнопки в дизайн сайта

Установка:

Шаг 1 - Установим JS:

Для того, чтобы кнопка наверх появлялась после того как вы прокрутили страницу сайта вниз, нам следует установить js, весов в 416 bytes, перед закрывающим тегом , в самый низ страницы.

JS

Code

Шаг 2 - Установим HTML:
Также в самый низ страницы, нам стоит разместить обычную ссылку с нужным нам классом, который мы прописали в скрипте выше:

HTML

Code

<a href="#" class="top_dm">Наверх</a>

Шаг 3 - Установим CSS:
Наша кнопка почти готова, осталось лишь прописать нужные css стили, в основном мы прижмём нашу кнопку к нижней части экрана браузера и пропишем ей правый отступ в 50 пикселей.

Белая кнопка:

CSS-Code

Code

/* Светлая кнопка наверх
------------------------------------------*/
.top_dm {
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#444;
  text-shadow:0 1px 1px #fff;
  cursor: pointer;
  position:fixed;
  bottom:-3px;
  right:50px;
  background:#D6D6D6;
  margin: 0px;
  padding:5px 10px 7px 10px;
  border:1px solid #909090;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
}

.top_dm:hover{
  color:#444;
  background:#EAEAEA
}

Тёмная кнопка:

CSS-Code

Code

/* Тёмная кнопка наверх
------------------------------------------*/
.top_dm {
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#F2F2F2;
  text-shadow:0 1px 1px #101010;
  cursor: pointer;
  position:fixed;
  bottom:-3px;
  right:50px;
  background:#7B7B7B;
  margin: 0px;
  padding:5px 10px 7px 10px;
  border:1px solid #525252;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
}

.top_dm:hover{
  color:#F2F2F2;
  background:#868686
}

Оранжевая кнопка:

CSS-Code

Code

/* Оранжевая кнопка наверх
------------------------------------------*/
.top_dm {
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#7a400b;
  text-shadow:0 1px 1px #fff;
  cursor: pointer;
  position:fixed;
  bottom:-3px;
  right:50px;
  background:#f69c4b;
  margin: 0px;
  padding:5px 10px 7px 10px;
  border:1px solid #c5650f;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
}

.top_dm:hover{
  color:#7a400b;
  background:#fbb87b
}

Синяя кнопка:

CSS-Code

Code

/* Синяя кнопка наверх
------------------------------------------*/
.top_dm {
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#0b3d7a;
  text-shadow:0 1px 1px #fff;
  cursor: pointer;
  position:fixed;
  bottom:-3px;
  right:50px;
  background:#7db1f8;
  margin: 0px;
  padding:5px 10px 7px 10px;
  border:1px solid #0f76c5;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
}

.top_dm:hover{
  color:#0b3d7a;
  background:#9dc7ff
}

Зелёная кнопка:

CSS-Code

Code

/* Зелёная кнопка наверх
------------------------------------------*/
.top_dm {
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#1b7a0b;
  text-shadow:0 1px 1px #fff;
  cursor: pointer;
  position:fixed;
  bottom:-3px;
  right:50px;
  background:#7df889;
  margin: 0px;
  padding:5px 10px 7px 10px;
  border:1px solid #4bc50f;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
}

.top_dm:hover{
  color:#1b7a0b;
  background:#a6ff9d
}

Красная кнопка:

CSS-Code

Code

/* Красная кнопка наверх
------------------------------------------*/
.top_dm {
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#7a0b0b;
  text-shadow:0 1px 1px #fff;
  cursor: pointer;
  position:fixed;
  bottom:-3px;
  right:50px;
  background:#f87d7d;
  margin: 0px;
  padding:5px 10px 7px 10px;
  border:1px solid #c50f0f;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
}

.top_dm:hover{
  color:#7a0b0b;
  background:#ff9d9d
}

Бирюзовая кнопка:

CSS-Code

Code

/* Бирюзовая кнопка наверх
------------------------------------------*/
.top_dm {
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#0b7a6e;
  text-shadow:0 1px 1px #fff;
  cursor: pointer;
  position:fixed;
  bottom:-3px;
  right:50px;
  background:#7df8eb;
  margin: 0px;
  padding:5px 10px 7px 10px;
  border:1px solid #0fbfc5;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
}

.top_dm:hover{
  color:#0b7a6e;
  background:#9dfffc
}

Кнопка стрелкой:
CSS-Code

Code

/* Кнопка наверх картинкой
------------------------------------------*/
.top_dm {
  cursor: pointer;
  position:fixed;
  bottom:7px;
  right:50px;
  margin:0px;
  width:32px;
  height:32px;
  background:url(http://www.center-dm.ru/ucoz/knopki/2/ico_up.png) no-repeat top;
}

.top_dm:hover{
  background-position:left -33px
}

Единственное что вам необходимо, так это найти два изображения нужной стрелки, соединить их в одно изображения благодаря Фотошопу или другому графическому редактору: