Каталог файлов

Рейтинг:4.0
Категория: Скрипты для Ucoz
 


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

Установка:

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

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

JS

Code
<script type="text/javascript" src="http://www.center-dm.ru/ucoz/knopki/2/top.js "></script>

Шаг 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  
}

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



и заменить его на пример выше в css стилях ico_up.png

В целом всё, до следующих статей...
 
 
 
Источник: http://www.center-dm.ru
 
 0 комментариев  770 просмотров  дата: 30.09.2020  автор: admin
 
 
Советую взглянуть:
  • Перейти на страницу для новостей сайта
  • Адаптация шаблона Epidem для Ucoz
  • uWnd окна в стиле Одноклассников ver 2.0 для uCoz
  • Старый шаблон ps-avatar для ucoz
  •  
     
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход

    Меню сайта

    Мини чат

    Последние комментарии


    Опрос сайта

    Что лучше?
    Всего ответов: 14

    Статистика

    Кол-во зареганных: 2906 (+0)
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сейчас на сайте:

    Нас посетили: