Стрелочка "Наверх"

[Vikabo 0]

Здравствуйте!

Такой вопрос: на нашем форуме стрелочка "Наверх" появляется только в самом низу страницы. Но пользователям было бы удобнее, если бы она появлялась после прокрутки первого экрана.

Объясните криворучке, где это можно изменить, а заодно и сам дизайн стрелочки тоже  (т.е. куда загружается новая картинка для нее)

Заранее благодарна! 

Edited April 27, 2018 by Vikabo

[invisionbyte 154]

Здравсвуйте. Инструкция:

Открыть шаблон globalTemplate и перед закрывающим тегом </head> вставить:

<script type="text/javascript">
           jQuery(document).ready(function(){
                       jQuery('body').append("<div data-ipsTooltip title='Подняться наверх' class='scrolltotop'><div class='scrolltotop__side'></div><div class='scrolltotop__arrow'></div></div>");
                  jQuery(window).scroll(function(){
                    if (jQuery(this).scrollTop() > 350) {
                           jQuery('.scrolltotop').fadeIn();
                    } else {
                           jQuery('.scrolltotop').fadeOut();
                    }
                });
                   jQuery('.scrolltotop').click(function(){
                      jQuery("html, body").animate({ scrollTop: 0 }, 50);
                    return false;
                });
            });
        </script>

Добавить в custom.css:

.scrolltotop {
	display:none;
	z-index: 9000;
    cursor: pointer;
    border-radius: 120px;
    position: fixed;
    width: 66px;
    height: 66px;
    bottom: 5%;
    right: 2%;
}
.scrolltotop__side {
	position: fixed;
    width: 66px;
    height: 66px;
    /* top: 86%; */
    bottom: 5%;
    right: 2%;
    background: #4e5f74;
    opacity: 0.6;
    border-radius: 120px;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.28);
}


.scrolltotop__arrow {
	border-radius: 120px;
    background: url({resource="arrow.png" app="core" location="global"}) top no-repeat;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.4)";
    opacity: 1;
        position: fixed;
    width: 30px;
    height: 44px;
    bottom: 5%;
    text-align: center;
    margin-left: 18px;
    background-size: contain;
}
.scrolltotop:hover .scrolltotop__side {opacity:1 !important}

Стрелочка указывается в качестве ресурса {resource="arrow.png" app="core" location="global"}

[Vikabo 0]

Спасибушки за подробную инструкцию! 

[invisionbyte 154]

9 часов назад, Vikabo сказал:

Спасибушки за подробную инструкцию! 

Пожалуйста