Мануал 2.x Scroll to Top

[23808]

Полоса прокрутки страницы вверх как в ВК и на хабре.

Создаем модификацию шаблонов:
Шаблон: PAGE_CONTAINER
Ключ модификации: scroll_to_top

Способ 1. Полоса Scroll to Top видна постоянно

Спойлер: Способ 1

Тип поиска: Простая замена
Найти:

</body>

Заменить:

<div class="scrollTop" id="scrollTop" onclick="$('body, html').animate({scrollTop: 0}, 50);" title="Наверх" style="display: block;"></div>
$0

В шаблон extra.less добавляем код:

@media (min-width: 1280px)
{
    .scrollTop {opacity: 0.5; top: 0; left: 0; width: 50px; height: 100%; z-index: 1; display: none; cursor: pointer; position: fixed;} // Вертикальная полоса "Scroll to Top" слева
    .scrollTop:before {font-family: 'Font Awesome 5 Pro'; content:"\f106"; font-size: 25px; position: fixed; top: 45%; left: 17px; color: @xf-paletteColor4;} // Иконка полосы
    .scrollTop:hover {opacity: 1; background-color: rgba(0,0,0,0.04);} // Затемнение полосы при наведении
    .u-scrollButtons.is-active {display: none;} // Скрыть кнопки скроллинга, когда видна полоса "Scroll to Top"
    .p-staffBar, .p-header, .p-sectionLinks, .p-footer {z-index: 2;} // Эти классы делаем ниже, чтобы полоса скроллинга не накладывалась на них
}

Способ 2. Полоса появляется при прокрутке страницы колесиком мыши

Спойлер: Способ 2.

Тип поиска: Простая замена
Найти:

</body>

Заменить:

<xf:if is="property('scrollJumpButtons')">
    <div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
        <div class="scrollTop" id="scrollTop" onclick="$('body, html').animate({scrollTop: 0}, 50);" title="Наверх"></div>
    </div>
</xf:if>
$0

@media (min-width: 1280px) - при условии, что в настройках стиля Максимальная ширина страницы 1200px, если значение больше, тот лента будет накладываться на основной контент, в таком случает подстраивайте под себя

 

[ratagag]

Спасибо

 

[makarov]

годно

 

[howtomw]

годно, спасибо за мануал