Jump to content

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

Featured Replies

  • Author

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

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
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? 

 
  • Author

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

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

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

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

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

image.png.c3154198468f984842d2ed6793aa1ba6.png

тема закрыта

Guest
This topic is now closed to further replies.

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

  • No registered users viewing this page.