Установка кнопки «НаВерх» для вашего сайта

Я много видел методов данного хука(надстройки) кнопки Наверх, но меня привлек именно тот который я опишу.

Метод заключается в установке кода javascript и нескольких строк CSS. Мне показалось это самым простым решением.

CMS на которые я буду ставить:
1. DLE 9.6
2. SMF 2.0
3. WordPress 3.х.х

При желании кнопку Наверх можно установить на любую CMS.

Ставим кнопку Наверх на DLE 9.6

Открываем главный файл шаблона main.tpl и ниже тега
[html] {AJAX}
[/html] вставляем следующий код:
[html] <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>
[/html] Я сделал немного проще: создал файл с таким содержанием и подключил его в шаблоне используя тег include
[html] {include file="top_button.tpl"}
[/html] В файле стилей /templates/MyTemplate/style/main.css дописываем следующий 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;
}
[/css] Кнопку загружаем в папку с картинками нашего шаблона templates/MyTemplate/images
Кому нужна картинка кнопки, выкладываю:

Вставляем кнопку на форум smf

Для форума у меня используется стандартная тема оформления, по этому пути скорее всего у нас с Вами будут совпадать. Css файл в который будем описывать стиль кнопки: www/Themes/default/css/index.css
[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;
}
[/css] Подключаю с помощью кода в файле www/Themes/default/index.template.php

Перед тегом [html]</body>[/html] примерно 370 строка, находим свободные кавычки»;» и вставляем после них код:
[php] ?>
<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
[/php] Обратите снимание путь до картинки в Css написан полностью, и в коде подключается библиотека «jquery.min.js». Иначе работать не будет. Также используется слой DIV для кнопки.

Вставляем кнопку «Наверх» на сайт под управлением WORDPRESS

На своем блоге я использую шаблон SeoGuru.

Открыл www/wp-content/themes/SeoGuru/style.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;
}
[/css]

Затем в файл www/wp-content/themes/SeoGuru/header.php Добавляем код который мы использовали для SMF:
[html] <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>
[/html]

Сайты на которые я поставил данную кнопку.

1. Acid.Name — Система wordpress
2. web-samouchka.com — Система DLE

Если Вам нравится данная кнопочка обращайтесь, поставим. )

Кстати мне на яндекс деньги пришло 5 рублей. Тому кто прислал огромное спасибо.

С уважением, Acid.