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.


Теги: , ,

Дата публикации материала: 27.03.2019

Трекбэк с Вашего сайта.

Поделиться: