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

[sergey81]

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

[sergey81]

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

[eh1]

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

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

 

[sergey81]

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? 

 

[SlawkA]

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

Спойлер

это плагин.

[Respected]

40 минут назад, sergey81 сказал:

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

custom.css

[SlawkA]

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

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

BacktoTop Dual.xml

BacktoTop Dual.xml

[sergey81]

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

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

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

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

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

тема закрыта