Наш опрос
Употребляете ли вы алкоголь?
Всего ответов: 20
Случайный анекдот
7 Стали волки часто на стадо овец нападать. Пошёл мужик на базар покупать подходящую собаку. Все с овчарками стоят, а один мужичек мелкую шавку расхваливает. - Да ну, её ж любой волк пополам перекусит! - Ты что, мужик, это ж собака-Боробака! Гроза всех волков, бери, не пожалеешь. Купил её мужик, поставил стадо охранять. И вот ночью бежит стая волков. Все большие серьезные такие волки. Смотрят, на лугу стадо коров пасется. Обрадовались волки, со всех ног бросились они к коровам. - Вон та моя!!! - кричит один волк. - А вон та моя!!! И тут смотрят большие серьезные такие волки маленькая собачонка стадо охраняет: - Тяф, тяф! Испугались волки и бросились наутёк. Подбегает самый молодой и горячий волк к вожаку и говорит: - Да ты что, вождь?? Что мы такой маленькой собачонки испугались?? Да максимум на что она способна так это поцеловать меня в задницу!!! - Оо-о-о-о... А ты знаешь, какие у нее холодные губы?
Статистика
Онлайн всего: 8
Гостей: 8
Пользователей: 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
Просмотров: 10131
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