Dle хак кнопку вверх перехода вы наверное часто замечали замечали на некоторых веб-ресурсах, такую удобную вещь, как кнопочка внизу или вверх перехода, которая возвращает посетителя к началу страницы. И наверное задавались вопросам, как сделать такую кнопку для поднятия вверх к странице? Это статья позволит реализовать на Вашем интернет-портале подобную функцию. Установка простая и все займет от силы одну минуту.
Сделал очередной велосипед Олег Александрович a.k.a. Sander - кнопка для прокрутки страницы интернет-портала наверх.
Кнопка Вверх/наверх перехода dle хак
Установка довольно таки проста, но надо как минимум уметь создавать/редактировать файлы и подключать JS файлы к шаблону.
CSS:
#gotop{position:fixed;width:41px;height:41px;right:7px;bottom:20px;display:block;background:url('../images/gotop.png') no-repeat;z-index:9998;display:none;}JS:
$(function(){var scroll_start=30;var top=0;$('body').append('<a href="#" id="gotop" title="Наверх"></a>');var s=$('#gotop');var margin_top=parseInt(s.css('top'));function gotop_scroll(){top=$(window).scrollTop();if(top<scroll_start)s.fadeOut(400);else s.css('opacity',0.5).fadeIn(300)}$(window).scroll(gotop_scroll);s.live({mouseenter:function(){if(top>scroll_start)$(this).fadeTo(200,1.0)},mouseleave:function(){if(top>scroll_start)$(this).fadeTo(400,0.5)},click:function(){$('html,body').animate({scrollTop:0},'slow');return false}})})Обратите внимание на scroll_start=30; Это количество пикселей, начиная с которого появляется стрелка.
Так же в папку
{THEME}/images/ вам нужно загрузить это Кнопка "Наверх" или любое другое изображение стрелки и переименовать его в gotop.png
С уважением,
Олег Александрович a.k.a. Sander
Кстати, на интернет-портале есть другой вариант, такой же кнопки, которая как и это подойдет для любой версии дле Хак вверх DLE кнопка перехода или хак Кнопка Вверх и вниз вы всегда может найти в разделе похожие публикации.
Если вам все это трудно, то в архиве уже готовый вариант нужно закинуть в ваш шаблон на дле, файлы из архива
прописать в main.tpl до тега
<head>эту строчку
<script type="text/javascript" src="{THEME}/js/gotop.js"></script>прописать в любой стиль CSS файлы вашего шаблона на dle код
#gotop{position:fixed;width:41px;height:41px;right:7px;bottom:20px;display:block;background:url('../images/gotop.png') no-repeat;z-index:9998;display:none;}Обновить страницу и наслаждаться кнопкой вверх на своем блоге!
Рекомендуем закачать dle хак кнопка Вверх/наверх перехода
Комментарии 20