All-For-Kompa.RU

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

Всё для компа

chat

Реклама

Реклама

Календарь

Популярное

Партнёры



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

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

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

Авторизация

Реклама

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

Опрос

Откуда удобнее качать?

1. depositfiles.com
2. letitbit.net
3. другой
4. Rapidshare.de
5. ifolder.ru
6. uploading.com
7. filespace.ru
8. Oxyshare.com
9. upload2.ne
10. quickdump.com
11. Megaupload.com
12. Hyperupload.com
13. Turboupload.com
14. Mytempdir.com
15. getfile.biz

Реклама

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

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

Комментарии

Счетчики

На сайте: 106
Прохожие: 105
Пользователей: 1
ivashka
Статус:

Счётчик тИЦ и 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 ...[ Скачали 67557 раз ]
    Амфибии, Гайд по ассасина...[ Скачали 31905 раз ]
    Амфибии, Гайд по шаманам.[ Скачали 30797 раз ]
    cs 1.6 patch v48 full[ Скачали 29211 раз ]
    Русский бот PW Alfa v 2.6[ Скачали 17356 раз ]
    Огромный пак глюков и баг...[ Скачали 12898 раз ]
    civilization 5 скачать бе...[ Скачали 12099 раз ]
    PW MP5[ Скачали 11299 раз ]
    MHS-Bot-PW 2.3 ботовод[ Скачали 10605 раз ]
    Niko Bellic (нико белич) ...[ Скачали 10146 раз ]
    Wallpapers Girls №1158[ Добавлен 01.11.2024 ]
    Granny Remake (2023/Ru/En...[ Добавлен 01.11.2024 ]
    Vampire Survivors (2021/R...[ Добавлен 01.11.2024 ]
    Wallpapers Mix №1866[ Добавлен 30.10.2024 ]
    Wallpapers Girls №1157[ Добавлен 30.10.2024 ]
    Red Dead Redemption (2024...[ Добавлен 30.10.2024 ]
    Wallpapers Girls №1156[ Добавлен 29.10.2024 ]
    Wallpapers Girls №1155[ Добавлен 27.10.2024 ]
    Wallpapers Girls №1154[ Добавлен 27.10.2024 ]
    Wallpapers Girls №1153[ Добавлен 26.10.2024 ]