PomoRde.NET

Официальный сайт

Хаки DataLife Engine

Как сделать кнопку вверх в DLE на jQuery

01 октябрь, 2013 0
Привет всем читателям. Сегодня я решил написать вам про замечательную штуку как кнопка вверх. По тенденции многие сайты нуждаются в этой кнопке. Удобство сайта всегда зависит от того насколько сайт удобен).

Прежде всего хотелось бы рассказать что кнопка полезна в основном для постоянных пользователей. Ну а если постоянный пользователь доволен удобством сайта, то он будет заходить к вам на сайт еще и еще. Да и вообще эта кнопка сейчас добавляет некого имиджа сайту. Как не крути а на саттелиты такие кнопки не ставят, разве что они уже были в шаблоне...

В общем начнем внедрять кнопку в сайт на DLE. Вообще скрипт который я сегодня покажу он может быть применен в любом движке, но так как этот блог повернутого именно на DLE, то и писать я буду на примере структуры сайта DLE.

Приступим к первому шагу.

Первый шаг:

Первым делом нужно добавить javascript в шаблон перед тегом.

$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});


Второй шаг:

Добавляем, в самый низ перед тегом следующий год:

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Напомню что все пользовательские скрипты нужно опубликовывать в ниху код. Для того что бы страница грузилась быстрее и пользователь не заметил что сайт тупит из за того что вы на тыкали кучу кнопок в разные стороны и с разными целями.

Третий шаг:

В своем стиле CSS обычно он называется "style.css" в него вписать нужно следующее:

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

Кого не устраивает картинка с Яндекса, можете скачать ее к себе в шаблон и не забыть главное путь в CSS поменять.

Все кнопка работает, проверяйте!

С CSS разобраться не сложно, тут все оптимизировано и понятно чайникам. Если есть вопросы пишите отвечу.
Прокомментировать
  • 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
Введите код с картинки:*
Кликните на изображение чтобы обновить код, если он неразборчив