Гость
Обновленые темы Популярные темы Активные пользователи
Fugas Team Потерянная судьба 21.08.2019 в 14:57 от Бармен OGSR Mod 20.08.2019 в 22:18 от Бармен Взлом Public Transport Simulator 1.34.1 20.08.2019 в 17:00 от Xemordio Взлом Last Day on Earth 1.14 20.08.2019 в 16:57 от Xemordio Взлом Shadow Fight 2 v 2.1.0 20.08.2019 в 16:55 от Xemordio Взлом Stardew Valley 1.33 20.08.2019 в 16:54 от Xemordio Взлом Flight Pilot Simulator 3D v 2.1.11 20.08.2019 в 16:52 от Xemordio Взлом Soul Knight 2.2.6 20.08.2019 в 16:51 от Xemordio Взлом Avakin Life 1.033.02 20.08.2019 в 16:50 от Xemordio Взлом Motor Depot 1.13 20.08.2019 в 16:49 от Xemordio

  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Скрипты для uCoz » Скроллбар по "экрану" rip Бармен
Скроллбар по "экрану" rip Бармен
Бармен Offline Дата: Среда, 20.02.2019, 17:33 | Сообщение # 1
Администратор
Звание: Рядовой [?]
Сообщений: 125


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

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

Код
<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>
Дата регистрации: 28.07.2018
Форум » Web-Раздел » Скрипты для uCoz » Скроллбар по "экрану" rip Бармен
  • Страница 1 из 1
  • 1
Поиск: