Все для DataLife Engine / DLE хаки / Хак для DLE / Кнопка Вверх/наверх перехода dle хак

Кнопка Вверх/наверх перехода dle хак


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; Это количество пикселей, начиная с которого появляется стрелка.

Так же в папку
/templates/Default/images/ 

вам нужно загрузить это Кнопка "Наверх" или любое другое изображение стрелки и переименовать его в gotop.png

С уважением,
Олег Александрович a.k.a. Sander
Кстати, на интернет-портале есть другой вариант, такой же кнопки, которая как и это подойдет для любой версии дле Хак вверх DLE кнопка перехода или хак Кнопка Вверх и вниз вы всегда может найти в разделе похожие публикации.

Если вам все это трудно, то в архиве уже готовый вариант нужно закинуть в ваш шаблон на дле, файлы из архива
прописать в main.tpl до тега
<head>

эту строчку
<script type="text/javascript" src="/templates/Default/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 хак кнопка Вверх/наверх перехода

Hak-dle-Knopka-Naverh.zip [8,13 Kb] (cкачиваний: 1187)
  • 100

Комментарии 20

xain от 22 февраля 2016 13:50
Для jquery версии выше 1.8 нужно поменять в js метод .live на .on, тогда все работает
Gani_97Kz от 2 октября 2014 12:55
Все отлично работает :)
Спасибо!
dle9.com от 6 апреля 2014 18:06
Цитата: ps58
10/2 все идет, но как изменить чтобы она не сразу появлялась? scroll_start=30 не помогает, и на 70 ставил , и -70)

может это
scroll_start)s.fadeOut(400)


Продолжительность (по умолчанию: 400)
Тип: число или строка
Строка или число, определяющее Длительность анимации
ps58 от 6 апреля 2014 17:25
10/2 все идет, но как изменить чтобы она не сразу появлялась? scroll_start=30 не помогает, и на 70 ставил , и -70)
dle9.com от 5 января 2013 12:00
удалить из стилей
display:none;
kostya173 от 5 января 2013 10:51
Когда появлялась.
kostya173 от 5 января 2013 10:48
Спасибо. Я немного не правильно задал вопрос. Я хочу что бы она всегда когда просто появлялась была яркой , а при наведение становилась прозрачной.
dle9.com от 4 января 2013 20:05
kostya173, из js
.css('opacity',0.5)

удалить аккуратно или добавить другие параметры
kostya173 от 4 января 2013 19:55
А как сделать что бы кнопка всегда была яркой, а не только при наведения ?
svv5000 от 30 октября 2012 21:51
Все работает dle 9.6 :bully:
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent