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

Question

I have a subpage with sections and sidebar with links to each section on every page. I am scrolling to each of them like so:

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]);
  }
});

This are the links in the sidebar on each page:

<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>

And this is my subpage:

<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>

Since, the navbar has a height of 80px , I have set it up in the script to scroll to the navbar on navigating to each section other than download which is the top most section. When I am navigating to a section from another page on small screens, it doesn't scroll all the way to the bottom of navbar, so I can see the content of the above section. This happens only on small screens and only on navigating to some section from another page, if I am on the same page or navigating from another page on the big screen, then it works fine. When I do console.log($(element).offset().top); I get different values for when I navigate to section from another page, then it is:

983.46875

And when I am on the subpage already, then it is:

1151.46875

this is where I am logging that:

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

Since, I am dynamically creating and hiding some elements on the subpage I think the wrong offset comes from that, because I guess it gets the offset before all the elements are created. This is the script that does that:

//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();
  }
});

But not sure how to fix that? I have tried with wrapping the call to scrollElement() from this script with the window.onload function, so that it executes after the page is completely loaded, but that didn't help, function wasn't called at all then. I have also tried by placing the whole function inside the success method of the ajax call, but then it scrolls all the way to the top.

Answer 1

As mentioned in your comments, that you need javascript for the fixed navbar. You need to wait until the element is defined . Otherwise you will get his null-pointer-exception . So you only can execute the scrollToElement() in the document.ready function or later.

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

is asynchronous. I think that your .meta-elements have no height at document.ready , when you scroll to your element with scrollToElement(...) . Try to add the function into your success: function.

Example for jQuery:

 var isSubpage = window.location.pathname.indexOf("subpage") >= 0; $(document).ready(function() { var element = window.location.hash; scrollToElement(element); $('.anchor-links').click(function(event) { if(isSubpage){ event.preventDefault() var element = $(this).attr('id').split('-'); if (element[0] == 'download') { $("html, body").animate({ scrollTop: 0 }); } else { scrollToElement('#' + element[0]); } } }); }); function scrollToElement(element) { if($(element) && $(element).offset()) $('html,body').animate({ scrollTop: $(element).offset().top - 80 }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>