ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Фонд форумаРеклама на сайте
Стать модераторомОтзывыДонат

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Быстрый фиксированный скроллер вверх/вниз [RUSSIAN_GOBLIN]


Быстрый фиксированный скроллер вверх/вниз [RUSSIAN_GOBLIN]

Сообщений 1 страница 5 из 5

1

Скройлер аля Вконтакте, стрелки справа
два полупрозрачных блока для прокрутки страницы с быстрой анимации скроллинга.
http://sh.uploads.ru/SrGdB.jpg

Автор: RUSSIAN_GOBLIN
Платформа: любая

Код:
    <!-- Скройлер аля Вконтакте (начало) -->
    <style type="text/css">
    #scroiller{
      position:fixed;
      height:100%;
      width:35px;
      top:0px;
      right:0px;
      cursor:pointer;
      z-index:10000;
    }
    #scroiller div{
      padding:3px 0px 0px 0px;
    }
    #scroiller div#up{
      display:none;
    }
    #scroiller div{
      height:50%;
      display:block;
      background:#fff;
      opacity:0.3;
    }
    #scroiller div:hover{
      opacity:0.85;
      background:#e2eef2;
    }
    #scroiller div{
      font:bold 1.1em Verdana;
      color:#0099cc;
    }
    </style>
     
    <div id="scroiller">
    <div id="back">< Назад</div>
    <div id="up"><img src="http://uploads.ru/i/d/y/F/dyFlO.png"/></div>
    <div id="down"><img src="http://uploads.ru/i/F/J/8/FJ8Z0.png"/></div>
    </div>
     
     
     
    <script type="text/javascript">
    var scrl=1; // если = 0, то прокручивает до самого верха страницы, иначе до навигации по форуму
    var marginpun=$('#pun').offset().left+5, scrolltrig=0;
    if(marginpun>62)$('#scroiller').css({'width': marginpun});
     
    $(window).scroll(function(){
    if ($(this).scrollTop() > 382){
    scrolltrig=1;
    $('#scroiller #back').hide();
    $('#scroiller #up').show();}
    else{
    scrolltrig=0;
    $('#scroiller #up').hide();
    $('#scroiller #back').show();}
    });
      
    $('#scroiller div').click(function () {
    if(scrl!=0) scrl=$('#pun-navlinks').offset().top;
    switch ($(this).attr('id')){
    case('back'):{window.back(1); break;}
    case('up'):{$('body,html').animate({scrollTop:scrl}, 500); break;}
    case('down'):{$('body,html').animate({scrollTop:$('#pun-break3').offset().top-$(window).height()}, 500); break;}}});
    </script>
    <!-- Скройлер аля Вконтакте (конец) -->

0

2

Полезная штука, спасибо

0

3

а мне так не очень нравится. но за информацию спасибо. для меня как для начинающего все важно

0

4

Куда вставлять скрипт? В html низ или верх? И ещё, как менять цвета стрелочек? Спасибо.

0

5

nosorog написал(а):

а мне так не очень нравится

ее можно перекрасить.
ваще задумано, я так понимаю, как "Вконтакте" с переходом на предыдущую страницу, но эта функция не работает.

Анемона написал(а):

В html низ или верх?

можно и туда, и туда. вставляй ниже более глобальных скриптов (типа выделения кода, блогов и т.д.) - в конец окошек.

стиль находится в этой части кода:

Код:
    <style type="text/css">
    #scroiller{
      position:fixed;
      height:100%;
      width:35px;
      top:0px;
      right:0px;
      cursor:pointer;
      z-index:10000;
    }
    #scroiller div{
      padding:3px 0px 0px 0px;
    }
    #scroiller div#up{
      display:none;
    }
    #scroiller div{
      height:50%;
      display:block;
      background:#fff;
      opacity:0.3;
    }
    #scroiller div:hover{
      opacity:0.85;
      background:#e2eef2;
    }
    #scroiller div{
      font:bold 1.1em Verdana;
      color:#0099cc;
    }
    </style>

а стрелки картинкой:

Код:
    <div id="up"><img src="http://uploads.ru/i/d/y/F/dyFlO.png"/></div>
    <div id="down"><img src="http://uploads.ru/i/F/J/8/FJ8Z0.png"/></div>


если проблемы с настройкой css, то опиши как должно выглядеть и дай сссылку на страничку с установленным кодом. подправлю.

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»



Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Быстрый фиксированный скроллер вверх/вниз [RUSSIAN_GOBLIN]