OJS 3: кнопка наверх
Многие пользователи Open Journal Systems спрашивают, как можно легко и быстро сделать кнопку наверх с плавной прокруткой. В данном материале мы постараемся рассказать об одном из вариантов реализации такой кнопки, которая должна повысить удобство использования сайта.
1. Скачиваем изображение стрелки в формате PNG, например то, что вы видите ниже…
2. Называем изображение «icon_top» и размещаем в одной из директорий на сервере, например, downloads
путь к картинке должен быть такой downloads/icon_top.png
3. Добавляем небольшой кусок кода в пользовательский CSS
.scrollup{ width:40px; height:200px; opacity:0.3; position:fixed; bottom:150px; right:40px; text-indent:-9999px; background: url('/downloads/icon_top.png') no-repeat; }
Для этого можно создать с помощью блокнота файл с расширением *.css и загрузить через админ-панель Open Journal Systems. Идем: Settings >>> Website >>> Appearance >>> Journal style sheet
4. Добавляем скрипт. Если используется базовый шаблон, то добавляем следующий код в файл plugins/themes/default/js/main.js
/** *Начало стрелки вверх */ $(document).ready(function(){ $('.scrollup').hide(); $(window).scroll(function(){ if ($(this).scrollTop() > 500) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); /** *Конец стрелки вверх */
код добавляется сразу перед этой последней строчкой
})(jQuery);
* Код можно также подгрузить и в отдельном файле *.js
5. Добавляем код стрелки в шаблон сайта.
<p><a class="scrollup" href="#">Наверх</a></p>
Можно для этого использовать менеджер пользовательских блоков, которые отображаются в боковой панели сайта. Идем: Settings >>> Website >>> Plugins >>> Custom Block Manager >>> Manage Custom Blocks
* Код также можно разместить и в других файлах шаблона… на Ваше усмотрение.
Если все сделано правильно, на сайте в правом нижнем углу появится стрелка наверх с плавной прокруткой.
Надеемся, что данный материал был для Вас полезен. С уважением. Участники OSU.
Теги: OJS, Open Journal Systems, инструкции
Дата публикации материала: 27.03.2019
Трекбэк с Вашего сайта.
Поделиться: