Установка кнопки «НаВерх» для вашего сайта
Опубликовано 22 Июль, 2012
Я много видел методов данного хука(надстройки) кнопки Наверх, но меня привлек именно тот который я опишу.
Метод заключается в установке кода javascript и нескольких строк CSS. Мне показалось это самым простым решением.
CMS на которые я буду ставить:
1. DLE 9.6
2. SMF 2.0
3. WordPress 3.х.х
При желании кнопку Наверх можно установить на любую CMS.
Ставим кнопку Наверх на DLE 9.6
Открываем главный файл шаблона main.tpl и ниже тега
{AJAX}
вставляем следующий код:
<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>
Я сделал немного проще: создал файл с таким содержанием и подключил его в шаблоне используя тег include
{include file="top_button.tpl"}
В файле стилей /templates/MyTemplate/style/main.css дописываем следующий css код:
/*Кнопка наверх*/ .scroll-to-top-button{ background: #cfe9ff 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; }
Кнопку загружаем в папку с картинками нашего шаблона templates/MyTemplate/images
Кому нужна картинка кнопки, выкладываю:
Вставляем кнопку на форум smf
Для форума у меня используется стандартная тема оформления, по этому пути скорее всего у нас с Вами будут совпадать. Css файл в который будем описывать стиль кнопки: www/Themes/default/css/index.css
.scroll-to-top-button{ background: #cfe9ff url("http://forum.serovweb.ru/Themes/default/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; }
Подключаю с помощью кода в файле www/Themes/default/index.template.php
Перед тегом
</body>
примерно 370 строка, находим свободные кавычки»;» и вставляем после них код:
?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <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); }); d.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); </script> <script type="text/javascript"> $(document).ready(function(){ $.autoScroll({ scrollDuration: 2000, showDuration: 600, hideDuration: 300 }); }); </script> <div style="opacity: 0.8; position: absolute; top: 486px; right: 0px; display:none;" class="scroll-to-top-button"></div> <?php
Обратите снимание путь до картинки в Css написан полностью, и в коде подключается библиотека «jquery.min.js». Иначе работать не будет. Также используется слой DIV для кнопки.
Вставляем кнопку «Наверх» на сайт под управлением WORDPRESS
На своем блоге я использую шаблон SeoGuru.
Открыл www/wp-content/themes/SeoGuru/style.css добавил код кнопки:
.scroll-to-top-button{ background: #cfe9ff 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; }
Затем в файл www/wp-content/themes/SeoGuru/header.php Добавляем код который мы использовали для SMF:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <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); }); d.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); </script> <script type="text/javascript"> $(document).ready(function(){ $.autoScroll({ scrollDuration: 2000, showDuration: 600, hideDuration: 300 }); }); </script> <div style="opacity: 0.8; position: absolute; top: 486px; right: 0px; display:none;" class="scroll-to-top-button"></div>
Сайты на которые я поставил данную кнопку.
1. Acid.Name — Система wordpress
2. web-samouchka.com — Система DLE
Если Вам нравится данная кнопочка обращайтесь, поставим. )
Кстати мне на яндекс деньги пришло 5 рублей. Тому кто прислал огромное спасибо.
С уважением, Acid.
супер!спасибо огромное!сейчасас к себе на сайт поставлю
А на joomle куда код явы скрипта ставить???
На сколько я понял код вырезается движком.
Попробуй расширение Jumi 2.0.6 или Blank Module
А как ее сделать внизу, а не с верху…
Указать
position: fixet;
вместо
position: absolute;
в css стиле !!!
поставлю на блог=)
Ставь. Будут проблемы пиши.
Не пойму откуда эта мода пошла… ведь есть такая замечательная кнопка на клавиатуре как «Home»
Все делается для удобства пользователей !
Так она прокручивает плавно!
Спасибо,как раз на днях хотел поставить на свой сайт)