Наш опрос
Курите ли вы?
Всего ответов: 42
Случайный анекдот
102 Офицер из Управления по борьбе с незаконным оборотом наркотиков приехал на ферму и требует показать ему поля на предмет выращивания там наркосодержащих растений. Фермер отвечает: - Нет проблем, сэр, только не ходите во-он на то поле... Офицер прямо взорвался: - Мистер, со мной власть Федерального правительства! С гордостью достаёт из кармана значок: - Видите этот значок? Этот значок означает, что я могу ходить туда, куда мне заблагорассудится. Абсолютно по любой земле! Безо всяких вопросов и отчётов! Я понятно выражаюсь?! - О'кей, сэр, - соглашается фермер. - Вы имеете полное право идти туда, куда вам нужно. Через пять минут фермер видит, что офицер со всех ног убегает от огромного разъярённого быка, и постепенно бык настигает его. Фермер бросает свои инструменты, после чего подбегает к заграждению и кричит офицеру во всё горло: - Твой значок! Покажи ему свой значок!..
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

   Кнопка вверх (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
Просмотров: 10133
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