Наш опрос
Какой сайт вы чаще посещаете?
Всего ответов: 32
Случайный анекдот
11 Учительница по русскому языку задала ученикам на дом написать сочинение на тему: «Происхождение моей семьи». Дома Вовочка спрашивает у бабушки: - Бабуль, а ты откуда на свет появилась? - Меня аист принес. - А мама? - Её тоже аист принес. - А я? - А тебя мы в капусте нашли. Вовочка сел за стол, почесал затылок, нахмурился и начал писать: «Вот уже три поколения, как наша семья размножается вегетативным способом, не зная прелестей половой жизни».
Статистика
Онлайн всего: 4
Гостей: 4
Пользователей: 0

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

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