Функция прокрутки плохо работает на мобильном телефоне

Question

У меня есть эта функция, которая прокручивает число в верхней части страницы после нажатия.

Отлично работает на настольном компьютере, но не на мобильном (iOS). В основном a не останавливается в верхней части страницы, но прокручивается выше и становится, очевидно, невидимым.

Есть мысли?

$(function() {
  $(".in a").click(function(event) {
    event.preventDefault();
    $(".in a.active").removeClass("active");
    $(".in a.current").removeClass("current");
    $(this).addClass("active");
    $(this).find("a").addClass("current");
    var $container = $(".npp");
    var $scrollTo = $('.active');
    $container.animate({
      scrollTop: $scrollTo.offset().top - $container.offset().top +
        $container.scrollTop(),
      scrollLeft: 0
    }, 500);
  });
})

body {
  font-family: Arial, sans-serif;
  font-size:10vw;
}

.npp {
  overflow: scroll;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 10px
}

.in a {
  display: block;
  padding-top: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=npp>
  <div class="in">
    <a href="#1uno">1</a>
    <a href="#1due">2</a>
    <a href="#1tre">3</a>
    <a href="#1quattro">4</a>
    <a href="#1cinque">5</a>
    <a href="#1sei">6</a>
    <a href="#1sette">7</a>
    <a href="#1otto">8</a>
    <a href="#1nove">9</a>
    <a href="#1dieci">10</a>
    <a href="#1undici">11</a>
    <a href="#1dodici">12</a>
    <a href="#1tredici">13</a>
    <a href="#1quattordici">14</a>
    <a href="#1quindici">15</a>
    <a href="#1sedici">16</a>
    <a href="#1diciassette">17</a>
    <a href="#1diciotto">18</a>
    <a href="#1diciannove">19</a>
    <a href="#1venti">20</a>
    <a href="#1ventuno">21</a>
    <a href="#1ventidue">22</a>
    <a href="#1ventitre">23</a>
    <a href="#1ventiquattro">24</a>
    <a href="#1venticinque">25</a>
    <a href="#1ventisei">26</a>
    <a href="#1ventisette">27</a>
    <a href="#1ventotto">28</a>
    <a href="#1ventinove">29</a>
    <a href="#1trenta">30</a>
    <a href="#1trentuno">31</a>
    <a href="#1trentadue">32</a>
    <a href="#1trentatre">33</a>
    <a href="#1trentaquattro">34</a>
  </div>
</div>