По многочисленным просьбам многих пользователей, выкладываю в свободное использование семь цветовых решений кнопки наверх и одно графическое как пример:
Шаг 1 - Установим JS:
Для того, чтобы кнопка наверх появлялась после того как вы прокрутили страницу сайта вниз, нам следует установить js, весов в 416 bytes, перед закрывающим тегом </body>, в самом низу страницы.
JS
http://ucoz-helper.ucoz.com/naverh/button_top.js
Шаг 2 - Установим HTML:
Также в самый низ страницы, нам стоит разместить обычную ссылку с нужным нам классом, который мы прописали в скрипте выше:
HTML
<a href="#" class="top_dm"></a>
Шаг 3 - Установим CSS:
Наша кнопка почти готова, осталось лишь прописать нужные css стили, в основном мы прижмём нашу кнопку к нижней части экрана браузера и пропишем ей правый отступ в 50 пикселей.
Светлая кнопка - CSS 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
/* Тёмная кнопка наверх
------------------------------------------*/
.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
/* Оранжевая кнопка наверх
------------------------------------------*/
.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
/* Синяя кнопка наверх
------------------------------------------*/
.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
/* Зелёная кнопка наверх
------------------------------------------*/
.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
/* Красная кнопка наверх
------------------------------------------*/
.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
/* Бирюзовая кнопка наверх
------------------------------------------*/
.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 стили
Кнопка стрелкой - CSS Code
/* Кнопка наверх картинкой
------------------------------------------*/
.top_dm {
cursor: pointer;
position:fixed;
bottom:7px;
right:50px;
margin:0px;
width:32px;
height:32px;
background:url(http://ucoz-helper.ucoz.com/naverh/ico_up.png) no-repeat top;
}
.top_dm:hover{
background-position:left -33px
}
· 
05:40
