JQuery прокрутка до div top не работает правильно

Question

Я использую JQuery для прокрутки до div сверху при клике. Однако он ведет себя беспорядочно и лишь иногда прокручивается в правильную позицию в документе.

Кто-нибудь может подсказать, что идет не так?

Чтобы дать больше контекста: элементы навигации исправлены, и функция scrollTop работает, когда страница первоначально загружается, и вы находитесь в верхней части документа. Однако если щелкнуть элемент навигации в другом месте документа, он не будет перемещен в правильную позицию или вернется к началу.

JS

$(document).ready(function() {

        $("#artistry").click(function() {
            $('html, body').animate({
                scrollTop: $("#artistry__wrapper").offset().top
            }, 1000);
        });

        $("#resume").click(function() {
            $('html, body').animate({
                scrollTop: $("#resume__wrapper").offset().top
            }, 1000);
        });

       $("#events").click(function() {
            $('html, body').animate({
                scrollTop: $("#events__wrapper").offset().top
            }, 1000);
       });

});

HTML

<div class="nav-wrapper">
    <div class="nav">
            <div id="artistry" class="nav">Artistry</div>
            <div id="resume" class="nav">Resumé</div>
            <div id="events" class="nav">Events</div>
    </div>  
</div>