Воскресенье, 24.11.2024, 08:33 | Поддержать проект
Познавательный Интернет-журнал
"Умеха - мир самоделок"
Самоделки, советы, ответы,
кулинарные рецепты и статьи.
Всегда есть, что почитать!
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
Главное меню
Основные рубрики
Авиа и Космос [30]
Арт [123]
Архитектура [0]
Бизнес и е-Бизнес [8]
Вестник Гондураса [23]
Видео [12]
ВНИИСПК [0]
Военная техника [13]
Военные хитрости [17]
Ворчалки [6]
Вылазки [6]
Деньги [2]
Дневники пользователей [0]
Еда [7]
Ж/Д техника [1]
Из истории [2]
Интернет [12]
Казусы [8]
Лохотрон [3]
Мирная техника [0]
Новости [14]
Оружие [9]
Прикольное [15]
Разная писанина [26]
Разные интересности [34]
Религия [1]
Скрипты для сайтов [99]
События [9]
Страшные сны [4]
Техноген [3]
Флот [23]
Хорошие вещи [2]
Календарь
«  Февраль 2013  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728
 Блог
Главная » 2013 » Февраль » 8 » Кнопка вверх (new)
21:51
Кнопка вверх (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 - серый
Категория: Скрипты для сайтов | Просмотров: 880 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Помочь проекту!
Поддержка
Комментарии к материалу
Имя *:
Email:
Код *:
Автор-составитель © Владимир Мао
Поиск по сайту
Сейчас читают
Рассылка сайта
Подписаться на информационные рассылки сайта
Enter
Люди:
Онлайн всего: 2
Гостей: 2
Зарегистрированных: 0

Проект "Умеха - мир самоделок" существует с 2005 года и с тех пор постоянно наполняется и совершенствуется. Основная доля документов, представленных на сайте материалов, предназначена для людей хозяйственных, интересующихся ведением собственного подсобного хозяйства, строительством, ремонтом и благоустроиством собственных домов, квартир или дачных участков.

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

Для людей занимающихся ведением своего личного подсобного хозяйства (ЛПХ) или фермерством, большая рубрика "Свое хозяйство" для удобства поделена на несколько узкотематических разделов, среди которых отдельными пунктами выделены такие темы, как парники и теплицы, цветы и флористика, деревья и кустарники, птицеводство и животноводство, пчеловодство и рыбоводство. Много статей опубликовано по теме "Сад и Огород".

И это далеко не все возможности сайта "Умеха - мир самоделок".

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




    BZ = 12.060
    DO = 45.700