Вход

Регистрация
Главная
 
Realwork2008 
Форма входа
Меню
  • Главная страница
  • Информация о сайте
  • Видеогид
  • Платные опросы
  • Обратная связь
  • Поисковые системы.
  • Новости сайта
  • Электронные книги-1
  • Зарубежные почтовики.
  • Российские почтовики.
  • Программы серфинга.
  • Бесплатно-всем
  • Гороскопы
  • Платежные системы.
  • Платежные системы 2
  • файлообменники
  • Каталог файлов
  • Доска объявлений
  • Каталог статей
  • Тесты
  • Блог
  • Форум
  • Фотоальбомы
  • Каталог сайтов
  • Гостевая книга
  • FAQ (вопрос/ответ)
  • Раскрутка сайтов
  • Календарь
    https://www.youtube.com/channel/UCIgIkHLcs3RvUTnZufSg3XA - Гороскопы предсказания приметы!
    «  Февраль 2013  »
    ПнВтСрЧтПтСбВс
        123
    45678910
    11121314151617
    18192021222324
    25262728
    Рекламма
    1
    SEO sprint
    SEO sprint - максимальная раскрутка сайтов!
    Облоко тегов
    В кадре
    Копилка сайта
    Банеры
    сервис для раскрутки сайта
    Каталог сайтов Всего.RU

    Каталог Ресурсов Интернет


    Заработок в сети TopDoski

     
    Top 100: Разное и универсальное (468x60, 33Kb)
    Главная » 2013 » Февраль » 13 » Кнопка вверх (new)
    14:47
    Кнопка вверх (new)
    Всем привет

    Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта 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 - серый
    Просмотров: 385 | Добавил: startsmart | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *:
    Вы на сайте
    Четверг
    16.05.2024
    09:55

    [ Управление профилем ]
    Поиск по сайту
    Информер праздники сегодня
    Бонус

    Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки

    Кошелек
    Код Защитный код

    Обмен Webmoney

    Блок рекламмы
    Популярные новости
    24 костюма для фотомонтажа в высоком разрешении.
    6 лучших книг по раскрутке и продвижению сайта
    ACDSee Photo Manager 2009
    Ad Muncher - маленькая, но очень полезная и функциональная программа, которая поможет избавиться от надоедливой рекламы
    ADDNEWS 2.3 + База 3000 DLE сайтов + Шаблоны
    AI Roboform Pro интеллектуальный менеджер паролей и заполнитель форм.
    AnyDVD 6.4.3.0
    Banner Maker Pro 7.0.3 – программа, позволяющая создавать баннеры
    Архив записей
    Лотерея
    1
    Друзья сайта
  • Лучший партнер сайта --WORKSTAR--
  • Лучший партнер сайта --GLACWORK--
  • Лучший партнер сайта --GLAC2008--
  • Лучший партнер сайта --REALCINEMA--
  • Лучший партнер сайта --VAS-LARIN--
  • Лучший партнер сайта --KALEDOSKOP2008--
  • Лучший партнер сайта --GOLDENLEDI2008--
  • Лучший партнер сайта --GOROSKOP--
  • Инфопродукты
    Статистика

    Copyright MyCorp © 2024-2011