Javascript - ページがロードされた後に要素へスクロール

Question

私は、各ページの各セクションへのリンクを持つセクションとサイドバーを持つサブページを持っています。私はそうのようにそれらのそれぞれにスクロールしています：

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は80pxのheightを持っているので、スクリプトで設定してにスクロールしますトップセクションであるダウンロード以外の各セクションにナビゲートするには、図10を参照してください。私が小さな画面で別のページのセクションにナビゲートしているとき、それはナビゲーションバーの一番下までスクロールしないので、上記のセクションの内容を見ることができます。これは小さな画面でのみ発生し、別のページから一部のセクションに移動する場合にのみ発生します。同じページにいる場合や大きな画面で別のページから操作している場合は正常に動作します。 私は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 
    }); 
    } 
} 

、私は動的に作成していますと、私はオフセット間違ってはそこから来て考えるサブページにいくつかの要素を隠しI GUので以来すべての要素が作成される前にオフセットを取得します。これは、それを行うスクリプトです：

//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関数でラップしようとしました。その結果、ページが完全にロードされた後に実行されるようになりましたが、役に立たなかったため、関数が全く呼び出されませんでした。私はまたajaxコールのsuccessメソッドの中に関数全体を置いてみましたが、一番上までスクロールします。

Answer 1

あなたのコメントに記載されているように、固定ナビゲーションバーのjavascriptが必要です。 element is definedまで待つ必要があります。さもなければ彼は彼のnull-pointer-exceptionを得るでしょう。したがって、document.ready以降の機能のscrollToElement()しか実行できません。

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

は非同期です。 .meta-elementsにの高さがありません。scrollToElement(...)で要素にスクロールすると、関数をsuccess:関数に追加してみてください。 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>