20.07.15, 10:27
2 комментарий
  DLE Хаки

Кнопка "Наверх" для DLE 10.x

Приветствую всех.
По просьбе трудящихся адаптировал кнопку "Наверх" для актуальных версий DLE и сделал маленький модный редизайн ;)

Установка предельно проста, но требует знаний - что такое файл стилей, что такое js файл и где они находятся.
Для начала необходимо залить эту картинку в папку images в вашем шаблоне.

Кнопка "Наверх" для DLE 10.x

В файле стилей прописываем стиль самой кнопки:

.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 файле прописываем сам обработчик:
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})});
})

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

СКАЧАТЬ

Вес файла
258 b

Комментарии

  1. iworks 21 июля 2015 06:00                    

    а кнопку назад как в контакте слабо запилить?)

  1. ToNik Пользователь offline 21 июля 2015 12:21                    

    iworks, Можете СКАЧАТЬ js файлик, залить (к примеру в корень сайта), прописать в шаблоне перед /body подключение
    <script type="text/javascript" src="http://ваш сайт/vk-up-back.js"></script>
    , в стилях добавить
    #topvk:hover{
    background:#228B22 !important;
    }

    Ну... как то так...

Напишите своё мнение