Форум

Samuil19 · #1 (**permalink**) 03.02.2015, 19:00

У меня на сайте стоит кнопка вверх. Опустившись по сайту, эта кнопка выходит.
Проблема в том, что кнопка выходит не плавно, а с каким-то подтормаживанием. Я выяснил это - конфликт анимации JS и своиств CSS Transition. Transition у меня стоит на всех кнопках, в том числе и на button. Мне нужно переделать JS код кнопки, чтоб выполнялись только условия Transition.

Сама кнопка:

<button id="go-top">
<a class="go-top-icon icon icon-arrow-top"></a>
</button>

JS код кнопки:

$(document).ready(function() {

    $(window).scroll(function() {
        if($(this).scrollTop()){
            $('#go-top').stop().animate({
                bottom: '24px'    
                });
        }
        else{
            $('#go-top').stop().animate({
               bottom: '-64px'    
            });
        }
    });

    $('#go-top').click(function() {
        $('html, body').stop().animate({
           scrollTop: 0
        }, 600, function() {
           $('#go-top').stop().animate({
               bottom: '-64px'    
           });
        });
    });
});

И её же CSS.

#go-top {
background-color: #cc3333;
height: 56px;
bottom: -64px;
right: 24px;
position: relative;
width: 56px;
border: none;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,.14),0 0 8px rgba(0,0,0,.28);rgba(0,0,0,.28);
box-sizing: content-box;
cursor: pointer;
outline: none;
padding: 0;
pointer-events: auto;
position: fixed;
-webkit-user-drag: none;
}

.go-top-icon {
left: 0;
background-size: 24px;
display: block;
margin: auto;
-webkit-user-drag: none;
}

.go-top-icon:before {
font-size: 32px;
color: white;
}

А в другом файле прописан Transition

input, button, textarea, select, label, a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}

ruslan_mart · #2 (**permalink**) 03.02.2015, 19:25

http://learn.javascript.ru/play/k47MBb

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      body, html {
        height: 2000px;
      }
      .go-up {
          border: 20px solid transparent;
          border-bottom-color: #333;
          bottom: 20px;
          opacity: 0;
          position: fixed;
          right: 10px;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
          -ms-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s;
          visibility: hidden;
          z-index: 100;
      }
      .go-up.go-up-show {
          opacity: 0.9;
          visibility: visible;
      }
      .go-up.go-up-show:hover {
          cursor: pointer;
          opacity: 1;
      }
    </style>
  </head>
  
  <body>
    <div class="go-up" title="UP"></div>

    <script type="text/javascript">
      var goUpElem = document.querySelector('.go-up'),
          goUpHidden = true;
      
      window.onscroll = function() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop >= 500 == goUpHidden) {
          goUpElem.classList[goUpHidden ? 'add' : 'remove']('go-up-show');
          goUpHidden = !goUpHidden;
        }
      };
      
      goUpElem.onclick = function() {
        window.scrollTo(0, 0);
      };
    </script>

  </body>
</html>

Samuil19 · #3 (**permalink**) 03.02.2015, 20:25

Спасибо, совсем не знаю JS, но извлек из вашего кода то что надо, на глаз.

Форум

Справочник

Discord чат

Курсы javascript