OJS: стрелка наверх для сайта

Так называемая «стрелка наверх» уже давно стала привычным элементом любого сайта, который стремится быть удобным для посетителей.

К сожалению, в стандартных шаблонах OJS (Open Journal Systems) данный элемент не предусмотрен.

К счастью, его можно легко добавить вручную.

Для этого Вам нужно найти любое понравившееся изображение в Интернете, сохранить или пересохранить его в формате *.png и назвать файл, к примеру, «top-bottom-1».

Или же просто сохранить на ПК стрелку ниже (серого цвета).

Далее нам нужно загрузить изображение стрелки с ПК в файлы OJS. Для этого идем: Управляющий журнала >>> Установка >>> Внешний вид журнала.

В любом из полей нажимаем кнопку «загрузить фото» (см. скриншот ниже). Загружаем с ПК наш файл.

Изображение появится в визуальном редакторе. После этого нужно или отменить действие (Ctrl + Z) или просто удалить изображение любым удобным способом. Оно уже было загружено на сервер. В этом окне стрелка нам не понадобится.

После этого находим п. 5.4. «Нижний колонтитул страницы журнала» и вставляем в него с помощью кнопки «HTML» следующий код.

<div id="back-top"><div class="top" style="display: block;"><img src="/public/site/images/admin/top-bottom-1.png" alt="" border="0" /><script type="text/javascript">// <![CDATA[
$(document).ready(function(){
 $("#back-top").hide();
 $(function () {
 $(window).scroll(function () {
 // прячем при скролле 
 if ($(this).scrollTop() > 100) {
 $('#back-top').fadeIn();
 } else {
 $('#back-top').fadeOut();
 }
 });
 // действия при клике
 $('#back-top .top').click(function () {
 $('body,html').animate({
 scrollTop: 0 
 }, 800);

 });
 });
});
// ]]></script></div></div>

Как это сделать см. скриншот ниже.

 

В окне Вы увидите только изображение стрелки. 

Не забываем дублировать код в других языковых версиях сайта и сохранить настройки внизу страницы (кнопка «сохранить и продолжить»).

Далее Вам понадобится доступ к файлам Open Journal Systems, которые лежат на удаленном сервере.

Находим следующую директорию и файл: styles/common.css

Добавляем в файл common.css фрагмент кода:

#back-top {
 cursor:pointer;
 position:fixed;
 bottom:40px;
 right:50px;
 z-index:999;
}

Должно быть приблизительно так:

Сохраняем файл…

Значения bottom и right можно менять, если вы хотите передвинуть стрелку по горизонтали или вертикали.

Как выглядит и работает «стрелка наверх» на сайте можно посмотреть, к примеру, здесь.

---

Мы надеемся, что данная информация была для Вас полезной.

С уважением. Участники проекта Open Science in Ukraine.