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

Форма входа

Wmlink.ru

Главная » 2013 » Февраль » 8 » Кнопка вверх (new)
21:18
Кнопка вверх (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 - серый
Просмотров: 417 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Союзники клана
  • Волкодавы
  • Тёмная лига

  • Календарь
    «  Февраль 2013  »
    ПнВтСрЧтПтСбВс
        123
    45678910
    11121314151617
    18192021222324
    25262728

    Архив записей

    Друзья сайта
  • Кто нас сегодня посетил
  • Создание не дорогих сайтов
  • Интернет-магазин ИМГА
  • InstaForexTrading
  • Forex four you
  • Оптимизация сайта.
  • Компьютерная помощь
  • Каталог сайтов-Мега ТИЦ
  • Пособие по HTML и CSS
  • клан Волкодавы
  • Forex Basic Information
  • Скачать пограммы бесплатно
  • Онлайн фильмы
  • Всё для uCOZ
  • Все новинки программх
  • Форекс для начинающих
  • Заработай на сайте
  • Видео онлайн 18+
  • Будем здоровы
  • Онлайн кино
  • Оптимизация сайта
  • Блюда на каждый день
  • Бизнес идея говорящие цветы
  • оплата за показы

    Опрос
    Оцените сайт
    Всего ответов: 16

    Статистика
    Каталог сайтов Мега ТИЦ
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0

       


    Этот сайт защищен «Site Guard»
    клан Гиперборея ©2010 Онлайн игра «Троецарствие» Cоздание клан сайта и тех.поддержка: warwar44 «Я в контакте»

    Бетон Селятино | Бетон Одинцово | Бетон в Щелково | Бетон Подольск | Бетон Сергиев-Посад | Бетон в Люберцах | Бетон Мытищи | Бетон Королёв | Бетон Домодедово | Бетон Островцы | Бетон Дмитров | Бетон Балашиха | Бетон Реутово | Бетон в Краснознаменске | Бетон в Лобне | Бетон Пушкино | Бетон в Москве | Бетон Химки | Бетон Серпухов | Бетон Железнодорожный | Бетон Реутов | Бетон Люберцы | Заказать доставку: песка, щебня и сыпучие нерудные стройматериалын |

    Создать бесплатный сайт с uCoz