Навигация
Главная страница Форум Каталог Файлов Большой Чат Battle Field Counter Strike GTA FouR Наши ТОПЫ
Все для Cервера
Запуск Сервера Консоль Делаем себя AdminоМ Запуск Сервера CS Устранение Лагов Русификация AMXMOD Настройка AMXMOD Команды Админа
Разное CS
Прострелы[de_dust2] Defens А[de_dust2] Общие Проблемы Полезное для CS Ближайшие Турниры Уменшаем PING CD Key для CS Делаем цвет Прицела Мувка на VegaS Из Демки в Видио Делаем Демку
Все для GTA4
Описание Игры Скачать GTA IV Разбор Ошибок Достижения в Игре Карты секретов,заданий Катчи для GTA <Соунды для GTA Сrack'S для GTA МoD'S для GTA Файлы к Серверам Читы для GTA Нововведения GTA Татуеровки в GTA Персонажи в GTA Радио в GTA Прохождение GTA Русификаторы для GTA Карты для GTA
Раздел APB
Описание Игры Первые Шаги Настройка и Вход Скачать Игру Регистрация в APB Cкачать Лаучер Клиент Бета Пополнить RTW Купить APB Управление в Игре Управление Музыкой Управление Бандой Туториал по Игре Инфа для Копов Инфа для Бандитов
Раздел СOD
Oбновляем PunkBuster Создание Сервера Запуск Мода Записать Демо Цветные Слова Установка Карт Команды Консоли Моды COD Разное COD Читы COD
Наша Кнопка



Пятница, 15/Ноября/2024, 05:38
Приветствую Вас Рядовой|^|
Главная » 2013 » Февраль » 8 » Кнопка вверх (new)
21:07
Кнопка вверх (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 - серый
Просмотров: 235 | Добавил: budyvmaster | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Партнеры
Друзья сайта:

Сайты персонала:
Рекламное Место
Место для вашей рекламы
Различное UcoZ
ТОП 10 Добавить Сайт[TOP10] Шаблоны для UcoZ Скрипты для UCOZ Изготовление Банера Раскрутка Сайта Прогон по Каталогам Изготовление Шапок Наши Банеры Конкурс Шапок[Форум] Проверка тИЦ и PR Проверка оценки Сайта
Мини-Чат
Battlefield 2142
Cервера BF2142 Описание Игры Демоверсия BF Системные Требования Ранги и Звания Боевые Роботы Разведчик (Recon) Виды Медалей Нашивки (Ribbons) Пины (Pins) Виды Бейджиков Материалы по Игре Виды Войнов Официальные Карты Главно Командующий Подсказки Игрокам Оружие Китая Оружие США Оружие MEC
Point Blank
Описание Игры Новые Маски в PB Штурмовые Винтовки Звание в PB Как зделать логотип Клана
Раздел Brink
Описание Игры Системные Требования Обучающее Видео Частные Cервера Как Играть по Интернету Ковчег Охрана Сопротивление Классы
Статистика
Онлайн:

Всего Онлайн: 1
Спекторов: 1
Пользователей: 0

Зарег. на сайте:
Всего: 855
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них:
Администраторов: 1
Модераторов: 1
Обычных: 834
Из них:
Парней: 844
Девушек: 11
Счетчики: