Кнопка «Наверх»

Представляем хак для DLE 10.x Кнопка «Наверх» - адаптированная кнопка «Наверх» под актуальный релиз DataLife Engine с маленьким модным редизайном.

Установка хака Кнопка Наверх для DLE 10.x предельно проста.
Для начала необходимо залить uarr.png картинку в папку images в вашем шаблоне дле.

В файле стилей с расширением CSS вашего шаблона прописываем стиль самой кнопки, можно добавить ниже код в самом конце:

.gototop{
    display: none;
    cursor: pointer;
    position: fixed;
    left: 0;
    top: 0;
    width: 3%;
    max-width: 60px;
    min-width: 10px;
    height: 100%;
    background: url('../images/uarr.png') no-repeat 50% 12px;
    transition: background-color .2s ease-in;
    z-index: 99;
}
.gototop:hover{
    background-color: rgba(240,240,240,.5)!important
}

И в JS файле прописываем сам обработчик, если есть JS файл в вашем шаблоне добавляем в конце такого файла ниже код

var gotop_scroll_start = 200;
function gotop_scroll(){
    if($(window).scrollTop()<gotop_scroll_start) $('.gototop').fadeOut(400);
    else $('.gototop').fadeIn(300);
}
$(function(){
    $('body').append('<div class="gototop" title="Наверх &uarr;"></div>');
    if($(window).scrollTop()>gotop_scroll_start) $('.gototop').show();
    $(window).scroll(gotop_scroll);
    $(".gototop").click(function(){$('html,body').animate({scrollTop:0})});
})

Если нет, кидаем папку JS из архива в папку шаблона и прописываем в самом начале main.tpl до тега /head код

<script type="text/javascript" src="/templates/Default/js/top.js"></script>

Готово.
С уважением,
Олег Александрович a.k.a. Sander

Все работает как часы на DLE 10.5, будет функционировать на любой версии движка, не забываем изображение стрелки прикреплённое к новости залить в шаблон/images

Скачать необходимые файлы для хака

Knopka-Naverh-dlya-DLE-10.x.rar [5,98 Kb] (cкачиваний: 168)