Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
True Stalker (0)
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1417)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
p4ladya (05.02.2024)
alexander24tomilin (20.12.2023)
Lesnik (13.12.2023)
nikbal888 (05.12.2023)
Fugaz56 (09.08.2023)
  • Страница 1 из 1
  • 1
Скроллбар по "экрану"
Слышу гимн зашитых ртов
StraNNik
Группа: Администратор
Ранг: Опытный
Сообщений: 1417
Карма: 33
Сообщение # 1
Дата: 20.02.2019 в 17:51


Рипал: Бармен


[greentable][/greentable]


Вставляем в Нижнею часть сайта в самый низ:

Код
<div id="pageuserscroll">
   <ul>
      <li>
         <div class="page-top" title="Наверх" style="display: block;">top</div>
      </li>
      <li>
         <div class="page-up" title="Предыдущий экран" style="display: block;">up</div>
      </li>
      <li>
         <div class="page-down" title="Следующий экран" style="display: block;">down</div>
      </li>
      <li>
         <div class="page-bottom" title="Вниз" style="display: block;">bottom</div>
      </li>
   </ul>
</div>

CSS:

Код
#pageuserscroll {
     bottom: 36px;
     height: 154px;
     overflow: hidden;
     position: fixed;
     right: 0;
     width: 41px;
     z-index: 200;
}
#pageuserscroll ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
}
#pageuserscroll ul li {
     display: block;
     height: 36px;
     margin-bottom: 3px;
     width: 41px;
}
#pageuserscroll .page-top {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-top.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll .page-up {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-up.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll .page-down {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-down.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll .page-bottom {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-bottom.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll ul li div {
     color: #666;
     cursor: pointer;
     display: block;
     height: 36px;
     overflow: hidden;
     text-align: center;
     text-indent: -9000px;
     width: 41px;
}

JS (в нижнею часть сайта):

Код
<script type="text/javascript">
$(document).ready(function() {
    $('<div id="pageuserscroll"><ul><li><div class="page-top" title="Наверх">top</div></li><li><div class="page-up" title="Предыдущий экран">up</div></li><li><div class="page-down" title="Следующий экран">down</div></li><li><div class="page-bottom" title="Вниз">bottom</div></li></ul></div>').appendTo($('body'));
    if ($(window).scrollTop() < 200) {
        $('#pageuserscroll .page-bottom, #pageuserscroll .page-down').fadeIn();
    } else {
        $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeIn();
    }
    $('#pageuserscroll li div').click(function() {
        var currentScroll = $(document).scrollTop();
        if ($(this).hasClass('page-top')) {
            $('html, body').animate({
                scrollTop: $("body").offset().top
            }, 400);
        }
        if ($(this).hasClass('page-bottom')) {
            $('html, body').animate({
                scrollTop: $(window).scrollTop() + $(document).height()
            }, 400);
        }
        if ($(this).hasClass('page-up')) {
            $('html, body').animate({
                scrollTop: currentScroll - $(window).height()
            }, 400);
        }
        if ($(this).hasClass('page-down')) {
            $('html, body').animate({
                scrollTop: currentScroll + $(window).height()
            }, 400);
        }
    });
    $(window).scroll(function() {
        if ($(this).scrollTop() >= $(window).height() / 2) {
            $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeIn();
        } else {
            $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeOut();
        }
        if ($(this).scrollTop() >= $(document).height() - $(window).height()) {
            $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeIn();
            $('#pageuserscroll .page-bottom, #pageuserscroll .page-down').fadeOut();
        } else if ($(this).scrollTop() >= $(document).scrollTop() - ($(window).height() / 2)) {
            $('#pageuserscroll .page-bottom, #pageuserscroll .page-down').fadeIn();
        }
    });
});
</script>

  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Microsoft Edge
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-28.05.2024