Гость
Обновленые темы Популярные темы Активные пользователи Новые пользователи Лента новостей
Аниме обои [24.06.2019]
Флудилка [24.06.2019]
Xemordio 3574 |  11 |  63
Бармен 43 |  7 |  0
Infe[R]nos 38 |  5 |  1
StraNNik 25 |  1 |  0
Waldemar 12 |  0 |  2
NL-Vincenz 12 |  0 |  3
pitersskii [26.06.2019]
lysikov-l [24.06.2019]
velesgod111 [24.06.2019]
gltimofey [21.06.2019]
vantuz29122004 [20.06.2019]
aslava406 [16.06.2019]

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


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

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

Код
<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
Поиск: