Перейти к содержанию

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


Vikabo
 Поделиться

Рекомендуемые сообщения

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

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

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

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

Изменено пользователем Vikabo
Ссылка на комментарий
Поделиться на другие сайты

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

Открыть шаблон 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"}

Ссылка на комментарий
Поделиться на другие сайты

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

Ссылка на комментарий
Поделиться на другие сайты
9 часов назад, Vikabo сказал:

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

Пожалуйста :)

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
 Поделиться

×
×
  • Создать...

Важная информация

Используя наш сайт вы соглашаетесь с нашей Политикой конфиденциальности