Почему моя страница не прокручивается вниз, когда я несколько раз касаюсь ссылки с привязкой?

Question

У меня есть ссылка с якорем, которая должна вернуть меня в начало моей страницы. Но когда я нажимаю на эту ссылку несколько раз, моя страница не прокручивается в следующие 5 секунд. Почему это происходит?

HTML:

<div class="back">
    <a href="#top" class="back__link">Вверх</a>
</div>

CSS (если вам это нужно):

.back
    position: fixed
    left: 90%
    top: 80%
    text-align: center
    padding-top: 25px
    font-family: 'Roboto', sans-serif
    width: 80px
    height: 55px
    background: $main-color
    border-radius: 50%
    z-index: 10
    &__link
        display: block
        height: 100%
        padding-top: 25px
        font-size: 20px
        color: #fff
        font-weight: bold
        text-decoration: underline 

JavaScript:

$(document).ready(function(){
    $(".back").on("click","a", function (event) {
    event.preventDefault();
    var id  = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').animate({scrollTop: top}, 1500);
    $('.menu').css('transform', 'translateX(-100%)');
    $('.menu').css('transition', '0.7s');
});

});