Понедельник|06.Мая.2024|00:39
 

Приветствую Вас Гость | RSSГлавная | Блог | Регистрация | Вход
Меню сайта
Мини-чат


Оптимизация
Сайт оптимизирован под браузер Mozilla Firefox Разрешение: 1280х1024

Cкачять бесплатно браузер Mozilla Firefox
Поиск
Облако тегов
FOTO Punkbaster Patch Проигрыватель демок MOD Zombie Fraps ProMod полезные команды ACE читер modernPaintball FPS Call of Duty 6 КАМПЕР Call of Duty 5 modern warfare 2 map video call of duty 4 comMod Nazi Zombie Dead Sand sniper mod Карты смерти Call of Duty 5 WaW DAMN Mod PAM Modern Warfare Nazi Zombie Custom Maps для Call of Duty 4 PeZBOT для Call of Duty 5 Mod K3 only knifes мод Мод для Call of Duty 4 - Star Wars Ioncannon demoplayer multiplayer Lanfix PunkBuster Waffle Mod v.1.0.1 eXtreme Sniper mod v.1.2 Damn Mod MW v0.59 4 AWE 4 Mod v.3.02 BJustReal (BJR) Realism v.4.0 Патч оружие Оружие в Modern Warfare 2 Call of Duty :WaW PeZBOT 002p-CoD5:WaW PeZBOT 008p X-Ray anti-cheat mapa карта Maroon Camo Skin
Наш опрос
Любимая карта в Call of Duty 4 ?

Результат опроса Результаты
Все опросы нашего сайта Архив опросов
Всего голосовало: 611
Обсудить на форуме
Главная » 2013 » Февраль » 13 » Кнопка вверх (new)
16:09
Кнопка вверх (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

Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body>

Код
<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div class="upTopButton"></div>
</div>


Установка JS

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

Код
<script type="text/javascript" src="http://bambun.ru/css_js/uptop.js"></script>


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

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый
Просмотров: 353 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0


Нас посетили сегодня

День рождения
danbdan(43)
Лучший пользователь

Strelok27
Полное имя
: Vasiliy
Личный номер: 1
Группа: Пользователи
Ранг:
Репутация: 4
Награды:

Активность

Комментариев: 18
Фотографий: 13
Форум: 1
KOSTIK
Полное имя
: Костя
Личный номер: 2
Группа: Администраторы
Ранг:
Репутация: 0
Награды:

Активность

Комментариев: 10
Фотографий: 0
Форум: 13
KGB_59
Полное имя
: Витя
Личный номер: 3
Группа: Модераторы
Ранг:
Репутация: 1
Награды:

Активность

Комментариев: 3
Фотографий: 0
Форум: 1
You Tube
Twitter

www.ALL-TOP.ru
Copyright MyCorp © 2024
Разрешается полное или частичное использование материалов портала при обязательном указании ссылки на источник. //cod4perm.ucoz.ru
Игровой портал COD4PERM