[Samuil19]

У меня на сайте стоит кнопка вверх. Опустившись по сайту, эта кнопка выходит.
Проблема в том, что кнопка выходит не плавно, а с каким-то подтормаживанием. Я выяснил это - конфликт анимации 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;
}