Представляем хак DLE кнопка «Вверх» для сайта от Яндекса, на странице Яндекса можно увидеть кнопку быстрого поднятие наверх, такое же можно установить на любом сайте.
Данная версия кнопки предоставлена Яндексом.
Итак, приступим к установке хака дле кнопка "Наверх" для сайта — версия от Яндекса!
1. Добавляем jаvascript в шаблон сайта, перед закрывающим тегом:
</html>Вставить код
<script type="text/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;});
});</script>
2. Добавляем html-код в шаблон сайта перед закрывающим тегом:
</body> Вставить код
<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>3. Добавляем CSS-стили блока и кнопки вверх в файл style.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://dle9.com/uploads/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}Создать папку /images/ и добавить файл картинку b-j-top.png туда, поменять адрес на ../images/b-j-top.png в коде или использовать как есть.
Готово!
Что тут можно настроить и изменить под себя:
•bottom:90px; – смещение блока с кнопкой относительно низа страницы;
•width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может.
•padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
•color:white; — цвет надписи «вверх»;
•border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.Для любой версии DataLife Engine и любых других CMS
Закачать хаки дле у нас, как хак