«Scroll To Top» - кнопка вверх страницы. [3.1][3.2]

Обсуждение расширений доступных к установке.
Описания расширений и возможности настроек.
(создание новых тем доступно только модераторам)

Модератор: vigor05

Аватара пользователя

Автор темы
Merlin
Сообщения: 672
Зарегистрирован: 03 янв 2015, 10:04
Благодарил (а): 30 раз
Поблагодарили: 242 раза
Пол:
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение Merlin » 14 мар 2015, 00:45

Версия расширения: 1.0.1
Статус расширения: релиз/проверено

Установка расширения:
  • Идем в >>> Администраторский раздел >>> Персонализация >>> Управление расширениями >>> Scroll To Top >>> Включить
Изображение

Расширение добавляет кнопку подняться вверх страницы на се страницы форума кроме "Администраторского раздела".
Настройки расширения - отсутствуют.

Изображение

Аватара пользователя

Diana
Сообщения: 35
Зарегистрирован: 04 ноя 2015, 23:06
Благодарил (а): 22 раза
Поблагодарили: 1 раз
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение Diana » 06 дек 2015, 20:47

Сделала все. Грубовато правда немного выглядит, но зато хорошо работает. Пусть пробуют пользователи, может понравится. :wink:

Изображение

Только вот в этом, 4-м пункте

Код: Выделить всё

<a href="#top" class="go_deck" id="go_deck">&#8593; На палубу</a>
<a href="#footer" class="go_hold" id="go_hold">&#8595; В трюм</a>
пришлось код на цвет совсем убрать, не принимало его, высвечивало на тех кнопочках номер(код) колора. Пробовала и их(родной) оставить, и наш ставила. Светят цифры вместе со словом "наверх/вниз". В общем не дошло до меня как изменить цвет и размер этих "кнопочек-флажков" :oops:

Аватара пользователя

silver073000
Сообщения: 204
Зарегистрирован: 02 янв 2015, 13:53
Благодарил (а): 47 раз
Поблагодарили: 31 раз
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение silver073000 » 07 дек 2015, 15:19

У меня стоит такая вот вещица.
Изображение
При наведении курсора на неё появляется такая вот панелька со стрелками вверх и вниз:
Изображение

Если кому-то интересен такой вариант, то вот процедура установки:
В overall_footer.html после

Код: Выделить всё

<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->
добавить

Код: Выделить всё

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Если эта библиотека подключена, то её можно не ставить.
Далее перед </body> ставится этот скрипт

Код: Выделить всё

    <script type="text/javascript">
            jQuery(function() {
                var overelem = jQuery('body');
                
                jQuery('#nav_up').fadeIn('slow');
                jQuery('#nav_down').fadeIn('slow');  
                
                jQuery('#nav_down').click(
                  function (e) {
                      jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
                  }
                );
                jQuery('#nav_up').click(
                  function (e) {
                      jQuery('html, body').animate({scrollTop: '0px'}, 800);
                  }
                );
                });
    </script>
    
        <div id="nav_container">
    	<div id="nav_panel" class="nav_arrow">
    		<div id="nav_up" class="nav_icon" title="Вверх"></div>
    		<div id="nav_down" class="nav_icon" title="Вниз"></div>
    	</div>
    </div>
Далее добавить в тему стиля (можно просто в конец stylesheet.css)

Код: Выделить всё

    /* Arrows up and down */
    #nav_container {
       position: fixed;
       top: 50%;
       left: 0;
       display: block;
       height: 200px;
       width: 40px;
       margin: -100px 0 0 -30px;
       padding: 0;
    }
    #nav_container:hover {
       margin-left: 0;
    }
    #nav_panel {
       height: 118px;
       width: 36px;
       margin-top: 40px;
       padding: 0;
       background-color: rgba(192, 200, 202, 0.7);
       border: 1px solid #666;
       border-left: none;
       -moz-border-radius: 0 5px 5px 0;
       -webkit-border-radius: 0 5px 5px 0;
       border-radius: 0 5px 5px 0;
    }
    div.nav_arrow {
       background: url("http://ССЫЛКА_НА_ВАШУ_КАРТИНКУ/arrow_state_right.png") no-repeat 26px 50% rgba(192, 200, 202, 0.7);
    }
    div.nav_icon {
       height: 32px;
       width: 23px;
       cursor: pointer;
       position: relative;
       opacity: .5;
    }
    div.nav_icon:hover {
       opacity: .7;
    }
    #nav_up {
       padding: 15px 0px 12px 0px;
       background: url("http://ССЫЛКА_НА_ВАШУ_КАРТИНКУ/arrow_up_32.png") no-repeat 0 50%;
    }
    #nav_down {
       padding: 15px 0px 12px 0px;
       background: url("http://ССЫЛКА_НА_ВАШУ_КАРТИНКУ/arrow_down_32.png") no-repeat 0 50%;
    }
    #nav_up:active {
       -moz-box-shadow: 0 -5px 7px rgba(0, 0, 0, .15) inset;
       -webkit-box-shadow: 0 -5px 7px rgba(0, 0, 0, .15) inset;
       box-shadow: 0 -5px 7px rgba(0, 0, 0, .15) inset;
       opacity: 1;
       background-color: rgb(192, 200, 202);
    }
    #nav_down:active {
       -moz-box-shadow: 0 5px  7px rgba(0, 0, 0, .15) inset;
       -webkit-box-shadow: 0 5px  7px rgba(0, 0, 0, .15) inset;
       box-shadow: 0 5px  7px rgba(0, 0, 0, .15) inset;
       opacity: 1;
       background-color: rgb(192, 200, 202);
    }
    #nav_container:hover div.nav_arrow {
       background-position: 100px 50% !important;
    }
    #nav_container:hover #nav_panel {
       width: 26px;
    }
В этом коде надпись ССЫЛКА_НА_ВАШУ_КАРТИНКУ надо заменить на вашу ссылку с менеджера картинок.
Прилагаемые картинки:
Изображение
Изображение
Изображение

Модификация эта для владельцев собственных стилей подходит. Для предустановленных не пробовал применять.

Аватара пользователя

Diana
Сообщения: 35
Зарегистрирован: 04 ноя 2015, 23:06
Благодарил (а): 22 раза
Поблагодарили: 1 раз
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение Diana » 10 дек 2015, 16:24

silver073000, работает в предустановленном стиле! :wink: СПАСИБО! :)

Аватара пользователя

Вчерашний борщ
Сообщения: 290
Зарегистрирован: 19 сен 2015, 17:25
Благодарил (а): 77 раз
Поблагодарили: 37 раз
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение Вчерашний борщ » 12 дек 2015, 17:53

Вариант silver073000 для меня заменил расширение. Понравилось еще решение на этом сайте. Там кнопки разнесены, фон прозрачнее + еще интересные опции. Не знаю насколько грузит форум, со стороны понравилось.
"Хочется сделать форум поддержки информативным и удобным :) " ©

Аватара пользователя

Diana
Сообщения: 35
Зарегистрирован: 04 ноя 2015, 23:06
Благодарил (а): 22 раза
Поблагодарили: 1 раз
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение Diana » 24 мар 2016, 13:09

Доброго денёчка! :)
Товарищи дорогие, у меня перестали почему-то работать стрелки по методу silver073000. Вот всё было нормально до вчерашнего дня, а потом вдруг стали неактивны кнопочки. Что это может быть? и как исправить ситуацию? Очень удобные и приятные эти стрелочки, жалко терять :sorry:

Аватара пользователя

beholder
Администратор
Сообщения: 1210
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Благодарил (а): 35 раз
Поблагодарили: 438 раз
Пол:
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение beholder » 24 мар 2016, 18:05

Diana,
код этих стрелок лучше разместить в overall_footer_after.html (так он будет гарантированно после вызова библиотеки jquery)
а сейчас он у вас, похоже, где-то "повыше".
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Аватара пользователя

Diana
Сообщения: 35
Зарегистрирован: 04 ноя 2015, 23:06
Благодарил (а): 22 раза
Поблагодарили: 1 раз
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение Diana » 24 мар 2016, 20:16

beholder, есть, заработало! :Yahoo!: Спасибо большое! :)


gabriel
Сообщения: 124
Зарегистрирован: 23 апр 2016, 10:55
Благодарил (а): 21 раз
Поблагодарили: 1 раз
Пол:
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение gabriel » 17 май 2016, 11:20

Вчерашний борщ писал(а): Вариант silver073000 для меня заменил расширение. Понравилось еще решение на этом сайте. Там кнопки разнесены, фон прозрачнее + еще интересные опции. Не знаю насколько грузит форум, со стороны понравилось.
Станица не найдена!
что за вариант, подскажите

Аватара пользователя

Автор темы
Merlin
Сообщения: 672
Зарегистрирован: 03 янв 2015, 10:04
Благодарил (а): 30 раз
Поблагодарили: 242 раза
Пол:
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение Merlin » 17 май 2016, 16:19

gabriel писал(а):
Вчерашний борщ писал(а): Вариант silver073000 для меня заменил расширение. Понравилось еще решение на этом сайте. Там кнопки разнесены, фон прозрачнее + еще интересные опции. Не знаю насколько грузит форум, со стороны понравилось.
Станица не найдена!
что за вариант, подскажите
http://dalnoboi.pro/forum/


gabriel
Сообщения: 124
Зарегистрирован: 23 апр 2016, 10:55
Благодарил (а): 21 раз
Поблагодарили: 1 раз
Пол:
Контактная информация:

«Scroll To Top» - кнопка вверх страницы.

Сообщение gabriel » 17 май 2016, 17:20

ах, я думал там решение
ладно спасибо )

Ответить