Меню сайта

Фильмы

Музыка

Категории раздела

Программы

Новости в мире

Самые свежие и интересные новости всего мира. У нас только правда!

Музыка

Фильмы

Шаблоны

Книги

Игры

Скрипты

Антивирусы

Графика

Программы для создания и корректировки Ваших фотографий, обои, интересные картинки и обучающие видео.

Юмор

Всё для контакта

Программы для улучшения работы сайта Вконтакте, программы для корректировок фото, для бесплатных подарков. Новости контакта, его плюсы и минусы.

Заработок

Статьи о том, как можно научиться зарабатывать дома, причём в короткие сроки и абсолютно бесплатно.

Раскрутка сайта

Статьи о том, как можно самому быстро и бесплатно раскрутить свой сайт за пару месяцев.

Интересные статьи

Мини-чат

Статистика

Онлайн всего: 4

Гостей: 4

Пользователей: 0

Посетившие за сегодня

Кнопка вверх (new)

Просмотров: 421 Автор: budyvmaster

(Рейтинг: 0.0)

08.02.2013

Всем привет

Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта 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>

Код

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

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый

Просмотров: 421 |

Автор: budyvmaster |

Коментариев: 0 |

Категория:

Скачать бесплатно Кнопка вверх (new) на высокой скорости и по прямой ссылке !
Зеркало#1 | Зеркало#2

Внимание !

У вас нет прав для чтения и добавления комментариев.

Пожалуйста авторизуйтесь или зарегистрируйтесь.

Добавление комментария

Есть что сказать? Пишите, нам всегда интересно знать Ваше мнение! Все вопросы по поводу данной новости оставляйте здесь, администрация и другие пользователи портала Knigy.at.ua постараются Вам помочь. Пожалуйста, пишите комментарии без орфографических и пунктуационных ошибок.