I use the Bootstrap 4 framework, attaching the .arrow-top button to the .arrow-top using jquery code for its functionality.
Interested in the question of how to hide it when opening a modal window, and when closing it still appeared again from the position indicated in the code:
$(document).on('hidden.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); } }); $(document).ready(function(){ $('.arrow-top').hide(); // Прячем кнопку $(function() { $(window).scroll(function() { if($(this).scrollTop() > 200) { // Где она должна появиться $('.arrow-top').fadeIn(); // Появление кнопки } else { $('.arrow-top').fadeOut(); // Исчезновение } }); $('.arrow-top').click(function() { $('body,html').animate({scrollTop:0},800); // Скорость анимации return false; }); }); }); $(document).ready(function(){ if ($('modal-open').length) { $('.arrow-top').hide(); } }); .arrow-top { position: fixed; bottom: 125px; z-index: 9999; right: 0; font-size: 30px; text-decoration: none; color: #fff; animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1); padding: 0px 5px 0px 5px; background: rgba(0, 0, 0, 0.4); border-top-left-radius: 5px; border-bottom-left-radius: 5px; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <body> <p>Много текста</p> <p>Много текста</p> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#diagnostics">Подробнее</button> <p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p><p>Много текста</p> <!-- Modal --> <div class="modal fade" id="diagnostics"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title" style="text-align: center;">Диагностика ноутбука / компьютера</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="button-close"> <div class="button-center"> <p>- Диагностика может быть как у вас <strong>на дому</strong> так и в сервисном центре.</p> <p>После диагностики мастер всегда расскажет вам:</p> <p><b>1</b>. О текущей неисправности (поломке) <br> <b>2</b>. О ценах на <b>услуги</b> и <b>комплектующие</b>; <br> Предлагает все возможные решения устранения поломки и примерное время восстановления работоспособности. <br> <b>3</b>. О других возможных <b>аппаратных</b> или <b>программных сбоях.</b> </p> <p style="text-align:center;">Диагностика при заказе ремонта <b>бесплатная.</b> <p style="text-align:center;"> <small>Без услуг ремонта - 20 РУБ.</small> </p> <div class="button-center" align="center"> <button type="button" class="btn btn-success" data-dismiss="modal" data-toggle="modal" data-target="#call">Заказать звонок</button> </div> </div> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <!-- End Modal --> <div class="arrow-top"> <i class="fas fa-arrow-circle-up"></i> </div> </body> 
