Ромашкин Сайт Друзей!

Поиск
Меню сайта
Категории раздела
Новости сайта [12]
Стихи и поздравления! [10]
для размещения статей
Улыбнись! [11]
Для поднятия настроения
С Празднечком Всех! [6]
Поздравление именинников! [2]
Конкурсы [0]
Открыточки [0]
Форма входа
Привет, Гость

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
поиск по сайту
Помощь для сайта
» R358343034523
» Z252679763199
» E200958936318
» U359698343263
Раздача бонусов

Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Обмен Webmoney

У многих нет кошелька вебмани чтоб помочь ближнему, но это ведь совершенно несложно помочь просто введя кошелек друга в это окошечко . Мы все пытаемся помочь КОМБАТЕ, попробуйте и вы внести свой маленький вклад вставь R275471502072 и нажми окей ! ТЕБЕ НЕ СЛОЖНО А ЧЕЛОВЕК НА ШАГ БУДЕТ БЛИЖЕ К ВЫЗДОРОВЛЕНИЮ!
Бонус от сайта
 БОНУС ОТ САЙТА
Часовня
Молитва иконе Святой Матроне Московской (часовня)
наш атестат

Проверить аттестат
узнай свой IP
Узнай свой IP адрес
ВРЕМЯ НА САЙТЕ
Главная » 2013 » Февраль » 8 » Кнопка вверх (new)
20:43
Кнопка вверх (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 - серый
Просмотров: 317 | Добавил: startsmart | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Часики
Календарь РОМАШКА
«  Февраль 2013  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728
ПОГОДА
Погода в Украине
SmS
НАША КНОПОЧКА
Мы будем Вам признательны, если Вы разместите нашу кнопку у себя на сайте. Если Вы хотите обменяться с нами баннерами, пишите на форум в тему "Баннерообмен"
Ромашка !
АДМИНИСТРАЦИЯ  383791408
Описание сайта
Скачать с YouTube
Скачать с YouTube 3gp и mp4 видео
FAQ / Описание:
1) Вставьте ссылку ...
2) Выберите с правой стороны формат - flv, mp4 или 3gp скачивание с youtube ...
3) Нажмите "Download video"...
Счетчики
Яндекс.Метрика
Узнать тиц и pr
Добавь в закладки
Часики -3
НА САЙТЕ
Архив записей
Внимание!
Все материалы, размещенные на сайте, найдены в сети интерент, как свободно распространяющиеся и представлены здесь исключительно в ознакомительных целях. Администрация сайта не несет ответственности за незаконное использование кем-либо материалов, находящихся на нашем сайте. Если вы являетесь правообладателем какой-либо информации, размещенной на сайте и считаете, что кто-то нарушает ваши права относительно данной информации, пожалуйста, свяжитесь с администрацией сайта, и мы приложим все усилия для устранения данной проблемы.

Copyright MyCorp © 2024
Используются технологии uCoz