1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

1.5.x Кнопка вверх как Вконтакте

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем boichan, 28.11.2016.

Загрузка
  1. boichan

    boichan Пользователь

    Регистрация:
    16.02.16
    Сообщения:
    1
    Симпатии:
    4
    Версия XF:
    1.5.3
    Недавно нашел интересную стать, как сделать кнопку вверх, как сделано это вконтакте.

    1. Вставляем в шаблон header после <xen:edithint template="header.css" />.
    Код:
    <script>
            // объявим переменные
            var bottom_position = 0; // положение страницы
            var flag_bottom = false; // флаг, для отображения кнопки "назад"
            var flag_animate = false;// Флаг, определяющий, выполнение анимации
     
            $(document).ready(function(){
                // клик по кнопке вверх/назад
                $('.in_top').click(function(){
                    // поднимаем флаг, началась выполнениние анимации
                    flag_animate = true;
                    // если на данный момент кнопка "назад"
                    if(flag_bottom){
                        // то скролим страницу в нужное место
                        $("body,html").animate({"scrollTop":bottom_position}, 300, function(){
                            // опускаем влаг анимации, она закончилась
                            flag_animate = false;
                        });
                        // меняем кнопку
                        flag_bottom = false;
                        $('.in_top span').html('↑ Наверх ↑');
                    }else{
                        // если кнопка "вверх"
                        $("body,html").animate({"scrollTop":0}, 300, function(){
                            flag_animate = false;
                        }); 
                        // запомним на сколько была прокручена страница
                        bottom_position = $(window).scrollTop();
                        // и зададим флаг, что нужно показать кнопку "назад"
                        flag_bottom = true;
                        $('.in_top span').html('↓ Назад ');
                    }
                });
      
                // делаем проверку при скролле
                $(window).scroll(function(event){
                    var countScroll = $(window).scrollTop();
                    // если прокрутили больше 100 пикселей и анимация не выполняется, то показываем кнопку
                    if (countScroll > 100 && !flag_animate){
                        $('.in_top').show();
                        if(flag_bottom){
                            flag_bottom = false;
                            $('.in_top span').html('↑ Наверх ↑');
                        }
                    // иначе прячем кнопку, если это не кнопка "назад"
                    }else{
                        if(!flag_bottom){
                            $('.in_top').hide();
                        }
                    }
                });
            });
        </script>
    2. Вставляем в шаблон header после
    <div id="header">
    ...
    </div>

    Код:
    <div class="in_top">
            <span>↑ Наверх ↑</span>
        </div>
    3. Добавляем в extra.css
    Код:
    .in_top{
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100px;
                height: 100%;
                opacity: 0.5;
                filter: alpha(opacity=50);
                cursor: pointer;
                display: none;
                z-index: 1000; 
            }
            .in_top:hover{
                background-color: #E1E7ED;
                opacity: 1;
                filter: alpha(opacity=100);
            }
            .in_top span{
                display: block;
                width: 100px;
                margin-top: 10px;
                text-align: center;
                color: #45688E;
                font-weight: bold;
            }
     
            #content{
                width: 100%;
                margin: 0 auto;
            }
    
    4. Получаем слева панель на всю длину экрана для скроллинга вверх и возвращения обратно к контенту аналогичную vk.com

    Снимок экрана 2016-11-28 в 17.21.07.png
     
    Diego1987, alexdeg, butik и ещё 1-му нравится это.

Поделиться этой страницей