Главная » 2013 » Февраль » 8 » Кнопка вверх (new) Кнопка вверх (new) 21:36:51 Всем привет Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта kinopoisk. Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта. Установка CSS Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS) Код .upTop {     display:none;   width:100px;   height:100%;   position:fixed;   left:0px;   top:0px;   z-index:100; } .upTopButton {     background:#777777 url(http://bambun.ru/images/goup.png) no-repeat;   width:27px;   height:27px;   position:fixed;   top:10px;   left:10px;   cursor:pointer; } .upTopZone {     display:none;   background:url(http://bambun.ru/images/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; } Установка HTML Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body> Код <div class="upTop blue">   <div class="upTopZone"><p>наверх</p></div>   <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>   <div class="upTopButton"></div> </div> Установка JS Вставляем данный код также перед тегом </body> Код <script type="text/javascript" src="http://bambun.ru/css_js/uptop.js"></script> На этом установка кнопки вверх для сайта закончена, по традиции я предлагаю несколько цветовых схем, чтобы каждый мог без труда применить сразу, полностью готовое решение у себя на сайте. Чтобы изменить основной цвет кнопки наверх, измените в html коде, класс blue на нужный из списка blue - голубой green - зеленый red - красный orange - оранжевый purple - пурпурный grey - серый Просмотров: 539 | Добавил: startsmart | Теги: | Рейтинг: 0.0/0 | - Оценить - Отлично Хорошо Неплохо Плохо Ужасно Скачать бесплатно: видео, софт, музыку, игры, клипы, книги, патчи, демо, шаблоны, скрипты Всего комментариев: 0   Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]

	Наша огромная галерея имеет размер более 9 тысяч картинок!!! [АВТО] [Красивости)] [Девушки] [АВТО] [АВТО] Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]

	Самые горячие темы форума обсуждаем!!! И вы присоединяйтесь к нам!   Самые интересные новости на нашем портале. Читайте бесплатно на 5 M W

	Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]

	На нашем любимом сайте http://5mw.ru находиться уже более 1851.94 Mb новостей, файлов, музыки, фотографий, статей, отзывов и огромный форум с каждым днём это число увеличивается! Мы благодарим вас за посещения нашего сайта http://www.5mw.ru и рады что вы выбрали именно нас! У нас всегда много интересной информации и различные конкурсы в виде раздачи icq номерков и только на нашем сайте http://www.5mw.ru ! Замете это совершенно уникальный сайт! Новости собираются из самых качественных источников и всегда самые свежие и на сайте появляются моментально! Так же прошу вас заметить столь важный момент, мы против ВИРУСОВ в Интернете у нас нет никаких вредоносных программ подставных, рекламы которая навредит вашему компьютеру, есть совсем не много рекламы проверенных партнеров таких как google.com и д.р Так же наш сайт обладает огромной галереей фотографий: Девушки, авто, НЮ и других направлений много фотографий формата HQ (большого формата) посещайте наш увлекательный сайт мы всегда будем вас держать в курсе всех событий Интернета!!! не забывайте регистрироваться! Добавляйте в избранные! Получайте призы и подарки от нашего проекта! 5mw.ru всегда рады гостям и постоянным пользователям! Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]