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

Как сделать такую кнопку на форуме

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

админ  форума, тихо слился в кусты. ни ответа ни привета. у самого же работает эта кнопка. что трудно было ответить как это сделать? ну или хотя бы сказать что это его ноу-хау и он  о нем не рассказывает) просто смысл тогда вашего форума поддержки? если даже такие  вопросы вы умалчиваете.

Поделиться сообщением


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

sergey81 без паники. Данная кнопка с лёгкостью находится в исходном коде любой страницы нашего форума и копируется к себе. В нашем случае в глобальном шаблоне перед закрывающим тегом body:

<script type="text/javascript">
   jQuery(document).ready(function(){
			   jQuery('body').append("<div 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;
        });
    });0
</script>

Ну и 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;
    bottom: 5%;
    right: 2%;
    background: #5c84a7;
    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(https://ipbmafia.ru/uploads/set_resources_27/84c1e40ea0e759e3f1505eb1788ddf3c_arrow.png) 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;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Respected сказал:

sergey81 без паники. Данная кнопка с лёгкостью находится в исходном коде любой страницы нашего форума и копируется к себе. В нашем случае в глобальном шаблоне перед закрывающим тегом body:

<script type="text/javascript">
   jQuery(document).ready(function(){
			   jQuery('body').append("<div 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;
        });
    });0
</script>

Ну и 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;
    bottom: 5%;
    right: 2%;
    background: #5c84a7;
    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(https://ipbmafia.ru/uploads/set_resources_27/84c1e40ea0e759e3f1505eb1788ddf3c_arrow.png) 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;
}

 

 

если с первой частью понятно.  то пришивать вторую часть к талии или к ногам?

CSS для оформления:  ...

это какой из файлов CSS? 

 

Поделиться сообщением


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

даже вот он этот плагин. ставил на 4.3.5

у меня все работает на 4.3.6

BacktoTop Dual.xml

BacktoTop Dual.xml

Поделиться сообщением


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

за кнопку и разъяснения - спасибо. очень уж пригодилась.

есть же ленивые посетители... вот для них и нужна.

кстати дизайн чуток изменил. не стал лепить большую круглую...т.к.

на мобильной версии сильно большой кажется.

вот что получилось)

image.png.c3154198468f984842d2ed6793aa1ba6.png

тема закрыта

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×