Наш опрос
Вы добавили нас в закладки?
Всего ответов: 23
Случайный анекдот
105 Международные соревнования по затяжным прыжкам с парашютом. В финале - трое: англичанин, француз и Василий Иванович. Приз - мешок золота - должен получить тот, чей парашют раскроется ниже всего. Первым прыгает англичанин. Летит, летит, раз - на высоте сто метров раскрывает парашют, ломает ноги. Публика в восторге. Вторым прыгает француз. Летит, летит, раз - на высоте пятьдесят метров раскрывает парашют, ломает позвоночник. Публика в восторге - явный лидер! Третьим прыгает Василий Иванович. Летит, летит... Шмяк об землю. Публика, просто ликует - ниже земли не упадешь! Василий Иванович кряхтя встает, отряхивается и говорит: - Так-с! С парашютом, козлы, накололи! Посмотрим, как с золотом.
Статистика
Онлайн всего: 3
Гостей: 3
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3498
Новых за месяц: 2
Новых за неделю: 1
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 177
Авторизованных: 3317

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


Бывают разные страницы, в том числе и очень длинные, и чтобы не прокручивать колесиком мышки по сто раз, или же просто не тащить постоянно скролл вниз вверх существуют такой помощник, как кнопка "вверх". Именно они без проблем перебрасывают нас наверх страницы. Одну из таких кнопок я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта kinopoisk. Эта кнопка подойдет для сайтов у которых свободна левая часть сайта. Скрипт занимает это пространство и ставит туда кнопку вверх при клике на которую мы плавно перенесемся вверх страницы.


Установка:
Файлы архива закачиваем в папку totop
В css ставим:

Код
.upTop {  
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {  
  background:#777777 url(/totop/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {  
  display:none;
  background:url(/totop/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;
}



Ставим на страницу перед тегом </body>

Код
<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <div class="upTopButton"></div>
</div>
<script type="text/javascript" src="/totop/uptop.js"></script>


Чтобы изменить основной цвет кнопки под свой дизайн, измените в html коде, класс blue на нужный из списка ниже:

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

Скачать архив 2,69 кб Html редактор
Автор: startsmart
Просмотров: 10667
08.02.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Кнопка вверх (new) След. »

Всего комментариев: 4

2 Александр (тополёк)
Блин, хотелось бы сегодня инфу по кнопке получить пожалуйста..

19.12.2013 в 19:40 | Перейти к материалу >
-
0
+

3 Алексей Чубаров (Prosvetekvator)
Ксс замени на этот:

19.12.2013 в 20:32 | Перейти к материалу >
-
0
+

4 Александр (тополёк)
Спасибо! Подошло.

19.12.2013 в 21:38 | Перейти к материалу >
-
+1
+

1 Александр (тополёк)
Всё хорошо. Спасибо. Но как мне сделать, что бы кнопка была внизу (сейчас она у меня сверху справа). Боюсь сам накосячить с кодом.

19.12.2013 в 11:17 | Перейти к материалу >
-
0
+

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Мини-чат
Топ пользователей
Новое на форуме








Комментарии
11.06.2022