Приветствую всех.
По просьбе трудящихся адаптировал кнопку "Наверх" для актуальных версий DLE и сделал маленький модный редизайн ;)
Установка предельно проста, но требует знаний - что такое файл стилей, что такое js файл и где они находятся.
Для начала необходимо залить эту картинку в папку images в вашем шаблоне.
В файле стилей прописываем стиль самой кнопки:
.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
}
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="Наверх ↑"></div>');
if($(window).scrollTop()>gotop_scroll_start) $('.gototop').show();
$(window).scroll(gotop_scroll);
$(".gototop").click(function(){$('html,body').animate({scrollTop:0})});
})
function gotop_scroll(){
if($(window).scrollTop()<gotop_scroll_start) $('.gototop').fadeOut(400);
else $('.gototop').fadeIn(300);
}
$(function(){
$('body').append('<div class="gototop" title="Наверх ↑"></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
Теги: 
Главная
