Scroll to Top

[MC_Mike]

MC_Mike добавил(а) новый ресурс:

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

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

Создаем модификацию шаблонов:
Шаблон: PAGE_CONTAINER
Ключ модификации: scroll_to_top
Тип поиска: Простая замена
Найти:

</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)
{...

Узнать больше об этом ресурсе...

 

[Max_Ptaschnick]

MC_Mike, а как сделать, чтобы эта полоса появлялась только при прокрутке вниз?

 

[IlyaPep]

MC_Mike, а как сделать, чтобы эта полоса появлялась только при прокрутке вниз?

javascript в помощь

 

[rozhur]

MC_Mike, а как сделать, чтобы эта полоса появлялась только при прокрутке вниз?

Можно поместить под навигацию (.p-navSticky) и ловить при помощи .is-sticky. Когда прокручиваешь вниз, навигация фиксируется сверху (добавляется класс is-sticky), таким образом можно присваивать display: block.

.p-navSticky.is-sticky .scrollTop {display: block;}

 

[MC_Mike]

Когда прокручиваешь вниз, навигация фиксируется сверху

Не думаю, что он это имел в виду. Вечером посмотрю, если будет время

 

[Sidd]

И чтобы при повторном клике назад возвращалась, как вот здесь Scroll Up как на vkontakte

 

[-OZ-]

MC_Mike, а как сделать, чтобы эта полоса появлялась только при прокрутке вниз?

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

P.S. Cделал чуть иначе - панель появляется только при достаточном размере страницы и не налезает на основной контент

 

[MC_Mike]

MC_Mike обновил(а) ресурс Scroll to Top новой записью:

2.0

• Новый способ, при котором полоса появляется во время прокрутки страницы колесиком мыши

Узнать больше об этом обновлении...

 

[kaz]

MC_Mike обновил(а) ресурс Scroll to Top новой записью:

2.0



Узнать больше об этом обновлении...

Второй способ не работает.

 

[HAIM]

Второй способ не работает.

Стандартные кнопки скролла XF включены?

 

[kaz]

Стандартные кнопки скролла XF включены?

Отключены. Не помогает.

 

[HAIM]

Отключены. Не помогает.

Так судя по коду их наоборот надо включить

 

[kaz]

Так судя по коду их наоборот надо включить

И включены и выключены - не помогает.

 

[MrFallen]

Стандартные кнопки скролла XF включены?

Где их включить? Подскажи :)

 

[IlyaPep]

Где их включить? Подскажи :)

Заходим в настройки стиля - настройки страницы - Отображать кнопки прокрутки страницы

 

[europa1988]

А при обновлении стиля все вернется назад?

 

[Hope]

Делайте по инструкции через модификации шаблонов и ничего никуда не вернётся.