1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.
  2. Уважаемый Гость! Если вы зарегистрировались на нашем форуме, значит вам нужна помощь! Мы всегда рады вам помочь, еще ни один пользователь не получил отказа! Но мы так же нуждаемся в Вашей поддержке. Проект полностью бесплатный, мы не имеем права требовать от вас денег, нам это и не нужно! Но от любой финансовой поддержки не откажемся. Проект развивается, но иногда очень тяжело его поддерживать, особенно в финансовом отношении. Если у вас есть возможность поддержать нас финансово, мы будем вам очень благодарны! С уважением, команда Оскласс Россия!
    Скрыть объявление
  3. Изменение в правилах форума! В связи с огромным количеством вопросов поступающих в адрес технической поддержки мы решили изменить правила форума! Просим всех пользователей обратить внимание на данные изменения и четко их соблюдать!
    Скрыть объявление
  4. Ребята, нуждаемся в программистах! Если хотите зарабатывать и есть время, пишите администраторам сайта. Есть база и инструменты, нужен опыт и знания =)
    Скрыть объявление

Скроллер "НАВЕРХ"

Тема в разделе "Шаблоны и улучшения", создана пользователем Магомед, 5 апр 2016.

  1. Магомед

    Магомед Новичок

    Здорова всем!
    Зарегистрировался сегодня. Узнал о существовании это движка только недавно. Захотел поставить скроллер "наверх", но не знал, что есть плагин, да и легче установить 3 кода, чем устанавливать плагин и дорабатывать его под себя, это мое мнение.

    Итак
    Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом </head>. В моем случае /oc-content/themes/osclasswizards/header.php
    PHP:
    <script type="text/javascript">$(document).ready(function(){
    $(
    window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
    $(
    '#scroller').click(function () {$('body,html').animate({scrollTop0}, 400); return false;});
    });
    </script>
    Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом </body>. В моем случае /oc-content/themes/osclasswizards/footer.php
    PHP:
    <div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>
    Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл main.css (в моем случае он находится /oc-content/themes/osclasswizards/css/main.css
    Код:
    .b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
    .b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
    .b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
    color:white;background:#D8D5C2 url(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}
    Вот собственно говоря и все. Я не спец в разработках, но некоторые моменты знаю. Надеюсь Вам пригодится.
     

    Вложения:

    heavig нравится это.
  2. Магомед

    Магомед Новичок

    Если хотите чтобы скроллер был в правом нижнем углу допишите CSS "top" со значением 35 в моем случае, вот окончательный вариант CSS:
    Код:
    .b-top {
    z-index:2600;
    position:fixed;
    left:0;
    bottom:90px;
    width:34%;
    margin-left:50%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    }
    .b-top:hover {
    opacity:1;
    filter:alpha(opacity=100);
    cursor:pointer;}
    .b-top-but {
    top: 35px;
    z-index:2600;
    position:absolute;
    display:block;
    left:0px;
    margin:0 0 0 100%;
    padding:25px 5px 0px;
    color:white;
    background:#4f5773 url(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;
    border-radius:5px;
    }
     
    iaropolc и centurion нравится это.

Поделиться этой страницей