Jump to content

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

Featured Replies

  • Author
comment_155316

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

comment_155323

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;
}

 

  • Author
comment_155325
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? 

 
comment_155328

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

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

BacktoTop Dual.xml

BacktoTop Dual.xml

  • Author
comment_155458

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

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

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

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

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

image.png.c3154198468f984842d2ed6793aa1ba6.png

тема закрыта

Guest
This topic is now closed to further replies.

Последние посетители 0

  • No registered users viewing this page.