В этой статье я расскажу как создать для своего сайта кнопку "Вверх" в виде виджета php-фреймворка Yii2. Таким образом будет возможность вывести ее в любом виде любого контроллера.


Код кнопки минимален, ничего лишнего. Функционал стандартный, минимально/оптимальный - кнопка появляется когда страница прокручена вниз и при нажатии плавно перематывает страницу на начало. Два коротких файла JS и CSS оформим таким образом, чтобы они подключались с выводом виджета, а там где он не нужен - не подключались вовсе. Пример того, что получится в результате, вы можете лицезреть на моем сайте. Заодно рассмотрим процесс создания своего виджета.

Сам виджет будет состоять из 3-х основных частей:

  • scrollup.js (скрипт);
  • scrollup.css (стили);
  • scrollup.php (вывод самой кнопки).
так же понадобится создать несколько служебных файлов, чтобы оформить это все в виде виджета. Создаем в папке common (для yii2 advanced) папку widgets, если ее еще нет, а для Yii2 basic - создаем папку (например - components) в корне сайта и дальше делаем по-аналогии. В common хранятся общие файлы. Т.к. виджеты могут понадобиться и для frontend и для backend - место самое подходящее.

В папке widgets создаем папку js и папку css, а в ней соответствующие файлы о следующим содержанием:

scrollup.js
$(document).ready(function(){  
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });
    $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

scrollup.css 
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('../img/icon_top.png') no-repeat;
}
Так же понадобится картинка кнопки, для этого там же создаем еще одну папку "img", куда помещаем файлик скачать

Т.к. подключаемые файлы у нас находятся не в папке Web, где обычно хранятся такие ресурсы, нужно их подключить с помощью своего asset-класса . Подключим для frontend, чтобы кнопка выводилась на всех страницах нашего сайта. Для этого создаем в папке \frontend\assets файл который назовем WidgetsAsset.php с содержимым: 
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
class WidgetsAsset extends AssetBundle
{
    public $sourcePath = '@common/widgets';
    public $css = [
        'css/scrollup.css',
    ];
    public $js = [
        'js/scrollup.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
    ];
}
тут в $sourcePath указываем общий путь к ресурсам виджетов, далее пути к отдельным файлам, а в $depends нам нужно указать чтобы js файл подключался не в самом начале, а после подключения jquery, т.к. скрипт написан на этом фреймворке. Хотя если подключать наш asset-класс будем уже в виджете, а не в методе контроллера, он и так подключится позже. Но пусть будет на всякий случай.

Еще такой момент: если комплект ресурсов располагается в директории которая не доступна из Web, эти ресурсы будут скопированы в Web директорию, когда комплект будет зарегистрирован в представлении. Такое копирование имеет недостатки:

  • во-первых вы можете что-то изменить в исходных файлах виджета, но скопированные ранее файлы, которые будут подключены останутся без изменений,
  • во-вторых - зачем копировать одно и тоже в другую папку?!!
Поэтому в Yii2 есть другой способ - использование символических ссылок. То есть в папке Web создастся ярлык на наши подключаемые файлы из папки common.

Для этого в config\main.php добавьте: 
return [
    // ...
    'components' => [
        'assetManager' => [
            'linkAssets' => true,
        ],
    ],
];

Подключение файлов настроено, нужно сделать вид виджета. Для вида (файла-представления) создаем в common\widgets папку views. В которой будут храниться файлы видов всех виджетов. Создаем в ней файл, назовем его аналогично - scrollup.php с всего одной строкой: 
<a href="#" class="scrollup"></a>

Осталось объединить это все в одном, главном файле виджета. Для этого создаем в common\widgets файл ScrollupWidget.php 
<?php
/*
 * Кнопка вверх
 */
?>
<?php
namespace common\widgets;
use Yii;
use yii\base\Widget;
use frontend\assets\WidgetsAsset;
class ScrollupWidget extends Widget {
    public function run() {
        //Подключаем свой файл Asset
        WidgetsAsset::register($this->view);
        return $this->render('scrollup',[    
        ]);
    }
}
В нем, для создания своего виджета, мы создаем свой класс ScrollupWidget, который наследует класс Widget для возможности использования полезных, встроенных в Yii2 методов работы с виджетами. В классе всего один метод run(), т.к. нам не нужно ничего делать с БД или что-то передавать в файл-представление. В данном методе мы регистрируем созданный нами ранее файл WidgetsAsset.php, который подключит нужные нам ресурсы и после этого вызовет файл вид scrollup.php из папки view.

кнопка "Вверх"

Теперь все готово. Осталось вызвать виджет на нужной странице. Т.к. мы решили выводить кнопку "Вверх" на всех страницах сайта, лучше всего поместить его в конец файла-шаблона frontend\views\layouts\main.php перед закрытием тега <body> 

<!--кнопка вверх-->
<?= common\widgets\ScrollupWidget::widget() ?>
<?php $this->endBody() ?>