Кнопка «Наверх» своими руками

Данная кнопка имеет понятную для всех задачу - если кликнуть мышкой по ней, она оправит нас к началу страницы. Разработчики шаблонов обычно устанавливают её в нижней части, как правило, это просто текстовая ссылка. Но в некоторых случаях это может быть изображение или даже целая область. Наверняка вы встречали сайты, на которых вся левая часть отводиться под ту самую кнопку «Наверх», согласитесь удобно! Если ваш ресурс содержит страницы, высота которых заставляет пользователей долго прокручивать её роликом мыши, то вам такая кнопка просто не обходима. Но как же сделать её самостоятельно? Мы рассмотрим самый просто и один из сложных вариантов создания такой кнопки.

Для того чтобы не было путаницы, возьмём стандартный шаблон «protostar» выставленный по умолчанию после установки Joomla. Будем работать с файлами расположенными в следующем каталоге на сервере … /templates/protostar/.

Простой способ

Легче всего такую кнопку создать при помощи этого кода:

HTML код:
<a href="#top">Наверх</a>

Вставляем в любую часть шаблона и всё.

Но у такого способа есть минус, по нажатию нас резко перебрасывает в верхнюю часть страницы. С задачей она справляется хорошо, но это не совсем красиво.

Более сложный способ

Теперь нам необходимо создать кнопку, которая будет эффектно появляться. То есть когда мы опускаемся вниз, она «всплывает». Помимо этого эффекта, по нажатию она должна плавно поднять нас к началу страницы.

Нам понадобится:

1. Картинка PNG
2. Код для вставки в шаблон
3. Java скрипт для анимации

Находим любую картинку в интернете, формат PNG. Лучше если она будет маленького размера. После чего переименовываем и при помощи программы FileZilla бросаем на сервер в директорию …/templates/protostar/images/up.png. «up.png» - это наше изображение.

Далее, необходимо скачать на компьютер файл index.php и открыть его через Notepad++.

В самом низу находим стандартную кнопку этого шаблона:

HTML код:
<a href="#top" id="back-top">
    <?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>

Меняем её полностью на следующий код:

HTML код:
<div id="gotop" style="float:right">
<a href="#" onclick="top.goTop(); return false;" title="Наверх"><img src="<?php echo JURI::base (true); ?>/templates/protostar/images/up.png" /></a>
<script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/scrolling.js"></script>
</div>

Должно получиться так:

Мы удалили старую кнопку «Наверх», в место неё прописали путь до нашей картинки «up.png» на сервере и подключили свой скрипт. На самом деле его нам ещё предстоит создать, но с начала index.php возвращаем в туже директорию с заменой …/templates/protostar/index.php. Теперь, если открыть сайт, то увидим полностью рабочую кнопку без анимации.

Здесь стоит упомянуть идентификатор id="gotop" в теге div. Мы не будем использовать таблицу стилей, но нам этот идентификатор всё равно потребуется. В java скрипте будет расположена небольшая функция, отвечающая за эффект «всплывание» и этот самый id="gotop" там прописан. Если удалить, то работать не будет.

Дальше нам следует создать файл scrolling.js используя редактор Notepad++. Открываем программу и нам сразу загружают пустой документ, нажимаем Ctrl+Alt+S. Пишем название scrolling, а внизу выбираем тип файла «JavaScript file».

Теперь открываем созданный нами файл scrolling.js и пишем в него вот этот большой код:

Javascript код:
(function() {  
 
function $(id){
    return document.getElementById(id);
}  
 
function goTop(acceleration, time) {
    acceleration = acceleration || 0.1; // Скорость подъёма: 0.01 - очень медленно, 1 - очень быстро (рекомендую - 0.1)
    time = time || 10;
 
    var dx = 0;
    var dy = 0;
    var bx = 0;
    var by = 0;
    var wx = 0;
    var wy = 0;  
 
    if (document.documentElement) {
        dx = document.documentElement.scrollLeft || 0;
        dy = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
        bx = document.body.scrollLeft || 0;
        by = document.body.scrollTop || 0;
    }
    var wx = window.scrollX || 0;
    var wy = window.scrollY || 0;  
 
    var x = Math.max(wx, Math.max(bx, dx));
    var y = Math.max(wy, Math.max(by, dy));  
 
    var speed = 1 + acceleration;
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
    if(x > 0 || y > 0) {
        var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")"
        window.setTimeout(invokeFunction, time);
    }
    return false;
}  
 
//*
function scrollTop(){
    var el = $('gotop');
    var stop = (document.body.scrollTop || document.documentElement.scrollTop);
    if(stop>400){
        if(el.style.display!='block'){
            el.style.display='block';
            smoothopaque(el, 0, 100, 1);
        }
    }
    else
        el.style.display='none';  
 
    return false;
}  
 
// Плавная смена прозрачности
function smoothopaque(el, startop, endop, inc){
    op = startop;
    // Устанавливаем прозрачность
    setopacity(el, op);
    // Начинаем изменение прозрачности
    setTimeout(slowopacity, 1);
    function slowopacity(){
        if(startop < endop){
            op = op + inc;
            if(op < endop){
                setTimeout(slowopacity, 1);
            }
        }else{
            op = op - inc;
            if(op > endop){
                setTimeout(slowopacity, 1);
            }
        }
        setopacity(el, op);
    };
};
// установка opacity
function setopacity(el, opacity){
    el.style.opacity = (opacity/100);
    el.style.filter = 'alpha(opacity=' + opacity + ')';
};  
 
if (window.addEventListener){
    window.addEventListener("scroll", scrollTop, false);
    window.addEventListener("load", scrollTop, false);
}
else if (window.attachEvent){
    window.attachEvent("onscroll", scrollTop);
    window.attachEvent("onload", scrollTop);
}     
 
window['top'] = {};
window['top']['goTop'] = goTop;           
 
})();

Остаётся только сохранить изменения и загрузить его в следующую директорию …/templates/protostar/js/scrolling.js.

После всех действий проверяем результат на сайте.

Заключение

Технически, подключать скрипт в том месте, где мы вставили код не совсем правильно. Его принято писать ближе к началу страницы, чтобы при открытии браузером скрипт первым загружался. Но для тех, кто только знакомиться с PHP можно оставить как есть, код всё равно будет работать. Мы так же не стали писать стили для нашей кнопки, потому что используем обычное изображение. Но при желании можно изменить форму и размер, используя файл template.css в папке «css».