close
OJS: стрелка наверх для сайта - Издательский дом Интернаука

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

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

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

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

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

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

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

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

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

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

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

//

$(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);

});

});

});

//

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

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

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

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

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

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

#back-top {

cursor:pointer;

position:fixed;

bottom:40px;

right:50px;

z-index:999;

}

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

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

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

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

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

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

Читайте также:

Facebook0
Twitter20
Instagram20
VK
OK