ARKAS Четверг, 19.12.2024, 06:26
Приветствую Вас Гость | RSS
Категории раздела
Игры [17378]
база данных [55]
Безопасность [1045]
Ключи [116]
Видео [9682]
Фото [410]
Графика и дизайн [2398]
Драйвера [442]
Музыка [3529]
Мультимедиа [3400]
Программирование [90]
Сеть и интернет [2494]
Скрипты для сайта [120]
Система [2533]
CD/DVD диски [518]
Словари и переводчики [151]
Cправочник [2]
Файлы и диски HDD [452]
Для работы с Файлами и дисками HDD
Офисные программы [1241]
всё что связано с документами
Хакерские программы [96]
Live CD & DVD & USB [93]
OS-Win XP,7, 8,vista, Mac OS, Linux; [1309]
Сборки Операционная система Win XP,7,8,Vista, Mac OS, Linux;
WPI [857]
Сборник программ
Дизайна рабочего стола [368]
темы визуального дизайна рабочего стола,заставки,скриншот
Программы для Авто [322]
Карты, навигация, путешествия [371]
Iphone ipad ipod [42]
Iphone ipad ipod
Android [296]
Программы для мобильных устройств [130]
Программы для мобильных устройств
Прочие файлы [127]
Новости [23]
ноутбук и ПК [3]
ноутбук и PC
Аудиокниги [442]
Электронных книг [2826]
Электронные справочники [522]
Энциклопедия [102]

Наш опрос
Оцените мой сайт
Всего ответов: 145

Мини-чат
500

Статистика

Онлайн всего: 121
Гостей: 121
Пользователей: 0


20:57
Кнопка вверх (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 - серый
Категория: Скрипты для сайта | Просмотров: 234 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
avatar
Вход на сайт

Поиск

Календарь

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

Друзья сайта

Copyright MyCorp © 2024Яндекс.Метрика