Наш опрос
Что бы вы хотели купить в интернете?
Всего ответов: 18
Случайный анекдот
110 Приходит муж с работы и прямо с порога орёт: - Так, жена, быстро раздевайся и в кровать! Жена дар речи потеряла - двадцать лет вместе прожили, такого не было, чтоб с порога и прямо в постель! Быстренько раздевается и в постель. Муж прыгает к ней, накрывается с головой одеялом и говорит: - Смотри, жена, часы купил - светятся!!!
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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