Яндекс.Метрика

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

phone +7-495-066-21-42, +7-495-066-45-61.
Перейти к контенту

Главное меню:

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

Проект House-science > OJS > Оформление OJS > Оформление OJS - дополнительно

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  можно менять, если вы хотите передвинуть стрелку по горизонтали или вертикали.

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

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

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




Индекс цитирования

© 2015-2016 ООО"Издательский дом Интернаука". Адрес: 115191, г. Москва, ул. Рощинская 2-я, дом 4, оф. 503. Тел.: +7-495-066-21-42 e-mail: i.nauka@mail.ru

Назад к содержимому | Назад к главному меню