Javascript - 页面加载后滚动到元素

我有一个包含部分和侧边栏的子页面，其中包含指向每个页面上每个部分的链接。我像这样滚动到他们每个人：

function scrollToElement(element) {
  if($(element) && $(element).offset()) {

    $('html,body').animate({
      scrollTop: $(element).offset().top - 80
    });
  }
}

$('.anchor-links').click(function() {
  var element = $(this).attr('id').split('-');

  if (element[0] == 'download') {
    $("html, body").animate({
      scrollTop: 0
    });
  } else {
    scrollToElement('#' + element[0]);
  }
});

这是每个页面侧边栏中的链接：

<div class="slideout-menu">
  <ul>
    <li>
      <a href="/subpage#download" class="anchor-links" id="download-link">Last ned</a>
    </li>
    <li>
      <a href="/subpage#about" class="anchor-links" id="about-link">Om oss</a>
    </li>
    <li>
      <a href="/subpage#faq" class="anchor-links" id="faq-link">Spørsmål og svar</a>
    </li>
    <li>
      <a href="/subpage#contact" class="anchor-links" id="contact-link">Kontakt</a>
    </li>
    <li>
      <a href="/all">Se alle magasiner</a>
    </li>
  </ul>
</div>

这是我的子页面：

<div class="background-container show-for-medium" id="download">
  <img src="/uploads/{{ $subpage->cover }}" alt="" />
</div>

@section('topBar')
  @include('customer.layouts.partials.top-bar')
@show

<div class="panel">
  @section('alexBox')
    @include('customer.layouts.partials.alex-box')
  @show

  @section('availability')
    @include('customer.layouts.partials.availability-info')
  @show
</div>
<section class="row faq">
  <div class="small-12 medium-10">
    <div class="subpage-section" id="about">
      {!! $subpage->about !!}
    </div>
    <div class="subpage-section" id="faq">
      {!! $subpage->faq !!}
    </div>
    <div class="subpage-section" id="contact">
      {!! $subpage->contact !!}
    </div>
  </div>
</section>

因为，在navbar拥有height的80px，我已经在脚本中设置它滚动到navbar上导航到比其他下载每个部分是最上面的部分。当我在小屏幕上从另一个页面导航到某个部分时，它不会一直滚动到导航栏的底部，因此我可以看到上述部分的内容。这只发生在小屏幕上，并且只发生在从另一个页面导航到某个部分时，如果我在同一页面上或从大屏幕上的另一个页面导航，那么它工作正常。当我console.log($(element).offset().top);从另一个页面导航到部分时，我会得到不同的值，然后是：

983.46875

当我已经在子页面上时，它是：

1151.46875

这是我记录的地方：

function scrollToElement(element) {
  if($(element) && $(element).offset()) {
    console.log($(element).offset().top);
    $('html,body').animate({
      scrollTop: $(element).offset().top - 80
    });
  }
}

因为，我在子页面上动态创建和隐藏一些元素，我认为错误的偏移量来自于此，因为我猜它在创建所有元素之前获得了偏移量。这是执行此操作的脚本：

//switch app and google store buttons
function shopButtons () {
  if (navigator.userAgent.match(/Android/i)) {
    $('.js-store-link').attr('href', 'https://play.google.com/store/apps/details?id=myapp.areader');
    $('.js-store-img').attr('src', '/img/google-store.svg');
  }

  if (navigator.userAgent.match(/iPhone|iPod/i)) {
    $('.js-store-link').attr('href', 'https://itunes.apple.com/no/app/myapp+/id777109367?mt=8');
    $('.js-store-img').attr('src', '/img/app-store.svg');
  }

}

$(document).ready(function(){
shopButtons();

  $.ajax({
    url: 'https://apiEndpoint/13/salesposter.json' ,
    data : { search: 'test' },
    dataType: 'json',

    success : function(json) {
      var partner = json.partner;
      var posterName = json.name;
      $('#posterName').text(posterName);
      var metaArray = json.metadata;
      $('.meta3').attr('href', metaArray[0].value);
      $('.spid-login').attr('href', 'https://payment.schibsted.no/flow/login/');

      metaArray.forEach(function(item, index, array){
        $('.meta'+item.prio).html(item.value);
      });
    }
  });

  //hide store buttons in alex box on subpages
  if (window.location.pathname.includes('/subpage')) {
    var element = $('#' + window.location.hash.substr(1));
    scrollToElement(element);
    $('.js-alex-box-store-buttons').hide();
  }
});

但不知道如何解决这个问题？我试过用函数包装scrollElement()来自这个脚本的window.onload调用，以便它在页面完全加载后执行，但这没有帮助，当时根本没有调用函数。我也尝试将整个函数放在调用的success方法中ajax，但是它一直滚动到顶部。