Кнопка Вверх/Вниз для InstantCMS 2.x и InstantCMS 1.10.4

4833
Здравствуйте любители InstantCMS!

В обсуждении темы на форуме Автоподгрузка страниц iCMS2 прозвучала мысль от qwest'а:
qwest:
...к ней комплектом кнопку "Вверх" наверное надо прикрутить.
и хоть тема уже поднималась наверное множество раз и на просторах интернета хватает готовых решений, я решил написать еще один велосипед еще одно, но адаптированное непосредственно для InstantCMS 2.x. По многочисленным просьбам пользователей первой ветки виджет был адаптирован для InstantCMS 1.10.4

InstantCMS 2.x

Особенностью данной "пимпы" является следующее её поведение: если пользователь прокрутил страницу, например до середины, и нажал на кнопку, то страница проскроллится вверх. При этом кнопка запоминает место откуда её нажали, и, при повторном нажатии сверху страницы, возвращает читателя к месту откуда начинался скролл (в нашем случае это середина страницы).

Внешний вид настраивается с помощью файла CSS (идет в комплекте) и заменой дефолтной картинки ..\templates\default\images\updownscroll.png. Картинка не самая привлекательная, поэтому настоятельно рекомендую ее поменять на что-то более подходящее под дизайн вашего сайта.

Устанавливается кнопка стандартным для Instant'а 2 методом, через инсталляцию новых компонентов и выбора установочного пакета. Подробнее можно посмотреть здесь с 15-ой минуты.

После завершения процесса установки в разделе Виджеты панели управления в подразделе Общие появится виджет "Скролл Вверх/Вниз", который необходимо перетащить в любое место на схеме разметки вашего сайта. При этом кнопка будет отображаться как ей сказано в файле CSS (по умолчанию в левом верхнем углу). Соответственно, если мы хотим видеть кнопку на каждой странице сайта, нужно бросить ее в раздел Системные -> Все страницы.

InstantCMS 1.10.4

Вот ссылка на скачивание кнопки Вверх/Вниз для первой ветки инстанта. Реализовано в виде модуля. На более ранних версиях работоспособность не проверялась, у кого есть возможность посмотреть, прошу отписаться фунциклирует или нет ))

Установка:
1. Копируем папки в корень сайта.
2. В Панели управления заходим "Модули -> Установить модули".
3. Следуем инструкциям...
4. После установки открываем редактор модуля (нажимаем иконку карандаша на против модуля UpDownScroll).
5. Подключаем модуль к необходимым страницам (например устанавливаем галочку "Показывать на всех страницах сайта")
6. Проверяем что Шаблон модуля установлен в "module_simple.tpl"
7. Жмём кнопку "Сохранить" и проверяем работоспособность пимпы =)

Внешний вид кнопки настраивается с помощью редактирования файла ..\templates\_default_\css\updownscroll.css


У кого будут вопросы, с радостью постараюсь на них ответить!

Скачать виджет InstantCMS 2.x: updownscroll.install.zip
Скачать модуль InstantCMS 1.10.4: updownscroll_icms1.10.4.zip

UPD. По просьбам многих пользователей набросал файл стилей кнопки на подобии "ВКонтакте" (такая длинная кликабельная полоска слева на странице). Чтобы установить скачайте файл и замените такой же по адресу ..\templates\default\css\updownscroll.css
Следует учитывать что полоска белого цвета! Следовательно, если фон страницы светлый/белый ее будет крайне плохо видно... Решается заменой цвета в разделе background.
Модуль автоподгрузки страниц для InstantCMS 2.x [Deprecated] | Виджет "Таблица картинок"
Комментарии (47)
SlavikBLR 21 августа 2014 в 23:46 +5
Спасибо + . Протестил на 1.10.3 все прекрасно работает, как и описано у вас, кнопка запоминает место откуда её нажали! Отображается она слево вверху, а можно сделать к примеру что-бы отображалась справа?
SlavikBLR 21 августа 2014 в 23:50 +3
А ну в принципе нам ничего сложного, в CSS можно поменять отображения, разобрался
SlavikBLR 21 августа 2014 в 23:50 +3
А ну в принципе нам ничего сложного, в CSS можно поменять отображения, разобрался
Val 21 августа 2014 в 23:52 +5
через правку стилей в файле updownscroll.css:
в .scroll_to_up уберите left: 15px; и допишите right: 55px;
Val 21 августа 2014 в 23:53 +3
smile пока писал вы уже сами разобрались!
glutezneff 22 августа 2014 в 01:49 +1
А что, интересный велосипед) +1 заслуженно даю.
Erwin 22 августа 2014 в 02:17 +1
Подскажите пож-та на InstantCMS 1.10.4 кнопка вверх есть а вниз не появляется. Только вверх работает?
Val 22 августа 2014 в 18:44 +4
Проблема решилась или нет? У себя на локальном сайте пробовал все работает.
Erwin 22 августа 2014 в 21:57 +1
Вверх есть и вниз нет
Val 23 августа 2014 в 20:32 +2
непонятно... у себя проверял и перепроверял - работает.
Может не стыковка с шаблоном какая есть? хотя если "вверх" кнопка появляется, то и "вниз" просто обязана быть!
Опишите подробнее что вы делали, что вы наблюдали и т.д., можно в личку
Erwin 3 сентября 2014 в 04:30 +1
А как "вниз" то может быть???
Открываю файл

Код PHP:
  1. <a href="#" class="scroll_to_up hidden " id="scroll_to_top" title="Наверх"></a>
Откуда тут кнопки вниз взяться???
Val 3 сентября 2014 в 08:01 +3
Всё верно smile Это ссылка и есть кнопка. А класс и заголовок ссылки меняется динамически javascript'ом. Заголовок изменяется на "Вниз", а изменение класса меняет фоновую картинку с изображением стрелки вниз.

Давайте с вами разберемся почему у вас не работает на сайте. Напишите мне в личку, для начала адрес вашего сайта.
Олег с клещами 22 августа 2014 в 11:53 0
на 2.1.1 не появляется ничего
Val 22 августа 2014 в 16:41 +1
на 2.1.1 вроде проверял все работало. Сегодня вечером еще раз посмотрю...
Val 22 августа 2014 в 19:00 +1
Попробуйте снова скачать архив и установить виджет.
На локальном сайте у меня все работает на 2.1.1
Олег с клещами 24 августа 2014 в 21:51 +2
Да, работает, спасибо!
SpaceSel 22 августа 2014 в 21:27 0
Установил, все работает. Не плохо!
PS: Как насчет сделать скролл для дефолтного шаблона двойки, как в ВК?
Val 22 августа 2014 в 22:17 +1
просветите меня подробнее )) что за скролл в ВК?
Romanovcmc 23 августа 2014 в 16:27 0
Для двойки файл не найден
Aryuts 23 августа 2014 в 16:46 0
Восстановите ссілку.
Val 23 августа 2014 в 20:36 +4
обновил ссылку...
Александр 24 августа 2014 в 05:24 +1
спасибо большое поставил +1
а можете демо или показать как у кого вышло? взглянуть так скажем, как это выглядит в живую))) а то уже себе когда то прикрутил чисто вверх хотел сравнить
Val 24 августа 2014 в 15:00 +2
Демо, к сожалению пока не могу выложить, нет хостинга. Скоро сделаю и будет полноценное демо
Александр 9 сентября 2014 в 04:01 0
кнопка замечательная(просто супер), а как известно истина познаётся в сравнении, как её можно сделать, что б она появлялась внизу, а не наверху?
подскажите пожалуйста.
Александр 9 сентября 2014 в 04:03 0
P.S. да и если вкл кеширование модуля в первой ветке Инстанта, что нам даст что для кнопки - ничего? или ...
Val 9 сентября 2014 в 08:02 +2
про кеширование не в курсе, включите и посмотрите что получится, потом расскажите)))
Val 9 сентября 2014 в 08:04 +3
Вопрос решается правкой файла стилей. Можете и расположение поменять и внешний вид!
Владимир 24 августа 2014 в 21:25 +3
Спасибо!!! Установил на 1.10.4. , работает. Поставил +1 v
Val 16 сентября 2014 в 21:42 +3
Небольшое обновление ПИМПЫ!!! Читаем UPD и качаем
Val 16 сентября 2014 в 22:00 +3
что-то ссылка не работает(((
вот другая
Настёна 21 октября 2014 в 15:05 0
Подскажите, пожалуйста, как сделать, чтобы кнопка отображалась снизу, так как у меня шапка фиксированная.
Val 21 октября 2014 в 18:56 +3
Поменяйте в файле стилей ..\templates\_default_\css\updownscroll.css
все значения top на bottom
Код CSS:
  1.  
  2. .scroll_to_up {
  3. ...
  4. bottom: 15px;
  5. ...
  6. }
  7.  
  8. .scroll_to_up:after {
  9. ...
  10. bottom: 50%;
  11. ...
  12. }
  13.  
Геннадий 7 декабря 2014 в 11:23 0
http://xn--h1adgffibpjn4e.xn--p1ai/ в icms2.1.2 не показывает кнопочки может подскажите что не так?
Геннадий 7 декабря 2014 в 11:23 0
http://xn--h1adgffibpjn4e.xn--p1ai/ в icms2.1.2 не показывает кнопочки может подскажите что не так?
Геннадий 7 декабря 2014 в 11:53 0
все решил,появилась кнопка
Геннадий 7 декабря 2014 в 12:02 0
а цвет как поменять,а то не заметная вобще
Val 7 декабря 2014 в 12:24 +1
Знамените файл картинки кнопки на более подходящий для вашего дизайна
Настёна 15 ноября 2015 в 10:29 0
Спасибо большое! v
Romario 4 января 2015 в 10:56 0
Что делать с этим?
Fatal error: Class 'widgetUpdownscroll' not found in D:\OpenServer\domains\localhost2\system\core\core.php on line 666
Romario 4 января 2015 в 11:07 0
Это после установки и размещения виджета. Если страницу панели управления не обновлять, то можно виджет удалить и все работать начинает. 2 ветка.
Val 12 января 2015 в 00:40 +2
Попробуйте переустановить виджет полностью. Проверьте правильность указания путей при установке и наличие файлов виджета в системе после установки (проверьте папку ..\system\widgets\updownscroll\)
mashen&ka 9 февраля 2015 в 21:45 0
Жаль у меня на 1.10.3 не работает((((
Val 9 февраля 2015 в 21:56 +4
сам не тестил, но в комментариях вверху пишут что все работает! По коду особых привязок к версии нет, т.е. должно работать. Попробуйте переустановить заново, предварительно почистив "мусор" от начальной установки кнопки.
mashen&ka 9 февраля 2015 в 22:10 +3
Ой!!! Спасибо всё нормуль! Залила не в шаблон.
Pocus 13 февраля 2017 в 16:11 +1
Val, спасибо, отличная кнопочка!
Небольшой лайфхак:
Если вы используете смену цвета кнопки при наведении, то заметили, что при наезде курсора на изображение стрелки цвет фона пропадает.
Чтобы событие hover не терялось на "дырках" в swg картинке, нужно задать какой нибудь цвет для её фона, например прозрачный.
Открываем templates\default\widgets\updownscroll\updownscroll.tpl.php и заменяем все fill="none" на fill="transparent" (4 вхождения)
Val 14 февраля 2017 в 00:58 0
Пользуюсь хромом в качестве основного браузера, и там такой проблемы нет)) Но после вашего сообщения действительно обратил внимание на такой неприятный момент в Firefox. Подумаю над решением если ничего не придумается, возможно воспользуюсь вашей правкой smile
Pocus 14 февраля 2017 в 04:18 0
Val, если будете делать ревизию, обратите внимание на неубиваемый ноль в отступе слева, из-за чего кнопку невозможно передвинуть к правой стороне. Я его удалял в БД.