All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Реклама

Реклама

Календарь

Популярное

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Архив новостей

Авторизация


Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

Если не спиться

1. лечь спать а не сидеть за компом до 6 утра
2. утопиться
3. обкуриться
4. воды напиться
5. задолбиться
6. обмочиться
7. выпрямиться

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 8
Прохожие: 8
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100

Раздел: uCoz

Кнопка вверх (new)

АвторАвтор: budyvmaster

|Голосов: 0 ДатаДата: 08.02.2013, 23:55

Всем привет

Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта 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 - серый




Правообладателям



Перед тем как скачать "Кнопка вверх (new)", проверьте ВСЕ ссылки на работоспособность. На момент публикации "Кнопка вверх (new)", все ссылки были в рабочем состоянии

Другие материалы на эту тему:

    Теги к материалу:

    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]

    Популярные файлыНовые файлы
    Call of Duty 5: World at ...[ Скачали 67384 раз ]
    Амфибии, Гайд по ассасина...[ Скачали 31764 раз ]
    Амфибии, Гайд по шаманам.[ Скачали 30673 раз ]
    cs 1.6 patch v48 full[ Скачали 29053 раз ]
    Русский бот PW Alfa v 2.6[ Скачали 17199 раз ]
    Огромный пак глюков и баг...[ Скачали 12752 раз ]
    civilization 5 скачать бе...[ Скачали 11945 раз ]
    PW MP5[ Скачали 11159 раз ]
    MHS-Bot-PW 2.3 ботовод[ Скачали 10411 раз ]
    Niko Bellic (нико белич) ...[ Скачали 10013 раз ]
    Wallpapers Girls №1051[ Добавлен 26.04.2024 ]
    Wallpapers Mix №1138[ Добавлен 25.04.2024 ]
    Jawbreaker (2024/Ru/En/Mu...[ Добавлен 25.04.2024 ]
    Wallpapers Girls №1050[ Добавлен 25.04.2024 ]
    Eclipse: Echo of Dimensio...[ Добавлен 25.04.2024 ]
    Phantom Fury (2024/Ru/En/...[ Добавлен 25.04.2024 ]
    Sweet Transit (2024/Ru/En...[ Добавлен 24.04.2024 ]
    Teenage Mutant Ninja Turt...[ Добавлен 24.04.2024 ]
    Wallpapers Mix №1137[ Добавлен 24.04.2024 ]
    Wallpapers Girls №1049[ Добавлен 22.04.2024 ]