Jump to content

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

Featured Replies

Как сделать такую кнопку на форуме для поднятия вверх страницы?

58FF80DC-B31F-447F-A778-51F2C2A03F3C.jpeg

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/
Share on other sites

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

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155316
Share on other sites

В плагинах поищи....Где-то видел

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155318
Share on other sites

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

 

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155323
Share on other sites
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? 

 
Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155325
Share on other sites

есть еще такая кнопка. вверх и вниз

Спойлер

45435.gif.7d300ebd216d8ff436b13dbbb87813f4.gif

это плагин.

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155326
Share on other sites
40 минут назад, sergey81 сказал:

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

custom.css

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155327
Share on other sites

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

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

BacktoTop Dual.xml

BacktoTop Dual.xml

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155328
Share on other sites

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

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

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

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

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

image.png.c3154198468f984842d2ed6793aa1ba6.png

тема закрыта

Link to comment
https://ipbmafia.ru/topic/21056-kak-sdelat-takuyu-knopku-na-forume/?&do=findComment&comment=155458
Share on other sites
Guest
This topic is now closed to further replies.

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

  • No registered users viewing this page.