Все наверно замечали на некоторых сайтах есть удобная кнопочка внизу, которая возвращает посетителя к началу страницы, это статья позволит реализовать на Вашем сайте подобную функцию хак dle кнопку вверх перехода.
Установка:
1. В файле main.tpl, перед тегом
</head>вставляем следующий код:
<script type="text/javascript"> (function(jq) { jq.autoScroll = function(ops) { ops = ops || {}; ops.styleClass = ops.styleClass || 'scroll-to-top-button'; var t = jq('<div class="'+ops.styleClass+'"></div>'), d = jq(ops.target || document); jq(ops.container || 'body').append(t); t.css({ opacity: 0, position: 'absolute', top: 0, right: 0 }).click(function() { jq('html,body').animate({ scrollTop: 0 }, ops.scrollDuration || 1000); }); $(window).scroll(function(){ var sv = d.scrollTop(); if (sv < 10) { t.clearQueue().fadeOut(ops.hideDuration || 200); return; } t.css('display', '').clearQueue().animate({ top: sv, opacity: 0.8 }, ops.showDuration || 500); }); }; })(jQuery); $(document).ready(function(){ $.autoScroll({ scrollDuration: 2000, showDuration: 600, hideDuration: 300 }); });</script>2. В файле стилей дописываем следующий css код:
/*Кнопка наверх*/.scroll-to-top-button{ background: #666 url("../images/ups.png") center center no-repeat; width: 32px; height: 32px; color: #fff; font-family: verdana; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; cursor: pointer; padding: 15px; margin: 20px;}3. Скачиваем картинку и заливаем на сервер в templates/имя шаблона/images
Хак Dle установка Кнопка вверх перехода
P.S. Данный плагин работает не только на дле, а и на других движках.
Предлагаем скачать DataLife Engine хак установка Кнопка вверх перехода
