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

Опубликовано 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.

Категория: Разное

Метки: кнопка, Наверх