
Код кнопки минимален, ничего лишнего. Функционал стандартный, минимально/оптимальный - кнопка появляется когда страница прокручена вниз и при нажатии плавно перематывает страницу на начало. Два коротких файла JS и CSS оформим таким образом, чтобы они подключались с выводом виджета, а там где он не нужен - не подключались вовсе. Пример того, что получится в результате, вы можете лицезреть на моем сайте. Заодно рассмотрим процесс создания своего виджета.
Сам виджет будет состоять из 3-х основных частей:
- scrollup.js (скрипт);
- scrollup.css (стили);
- scrollup.php (вывод самой кнопки).
В папке 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 директорию, когда комплект будет зарегистрирован в представлении. Такое копирование имеет недостатки:
- во-первых вы можете что-то изменить в исходных файлах виджета, но скопированные ранее файлы, которые будут подключены останутся без изменений,
- во-вторых - зачем копировать одно и тоже в другую папку?!!
Для этого в 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() ?>