Гость
Обновленные темы Популярные темы Активные пользователи
Создание типовых квестов 3 30.03.2020 в 15:13 от 2024end S.T.A.L.K.E.R. - UE4 0 29.03.2020 в 16:19 от Бармен S.T.A.L.K.E.R - Группа Cтрелка 0 22.03.2020 в 16:41 от Бармен Школы для The Sims 4 0 20.03.2020 в 09:36 от 2024end Хроники Кайдана 0 16.03.2020 в 00:17 от Бармен Игра Душ - Новое Начало 0 15.03.2020 в 13:28 от Бармен «Doomed to Eternal Torment» - Обречённый на вечные муки 1 15.03.2020 в 12:53 от Бармен Иконки групп для synthira 18 14.03.2020 в 23:53 от LENA_D Красивые анимированные кнопки Action rip Бармен 0 11.03.2020 в 02:24 от Бармен Моды от Dumbaby The Sims 4 modder | 18+ mods 32 27.02.2020 в 09:33 от 2024end
2024end 3869

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Скроллбар по "экрану" rip Бармен
Скроллбар по "экрану" rip Бармен
Администраторы
Кол-во постов: 154
Репутация: 759
Регистрация: 28.07.2018
Статус: Не в сети
 Автор темы | Среда, 20.02.2019, 17:33 | Сообщение # 1


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

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

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