ワンページスクロール：ホームページにリダイレクトしてdivにスクロールしようとしています - 動作していませんか？

Question

今、私はしばらくそれをしてきました。 1ページのスクロールはホームページ（div idが定義されている場所）で動作します。

問題：ブログのページから、ユーザーが「連絡先」をクリックすると、ホームページにリダイレクトされます。divにアニメーションスクロールします。

試み：私は、ユーザーがaタグをクリックすると、その後、今if statementを使用してページがブログしているかどうかを確認、その後、チェック
window.location.href = home +sectionID;

を使用して、ホームページ（およびDIVに）に戻って、それらをリダイレクトしようとしました

動作しません。

header.phpの（唯一のNAVビット...）

  <nav class="header-nav"> 
       <!-- Create a navigation called primary in the header (front-end) --> 

       <?php $args = array('theme_location' => 'primary'); ?> 
       <?php wp_nav_menu($args) ?> 
      </nav> 

フロントpage.php（ホーム）

<div id="about-View" class="bg-1-wrapper"> #content </div> 
<div id="contact-View"> #content </div> 

Javascriptを

jQuery(document).ready(function() { 

    // add a click listener to each <a> tags 
    setBindings(); 

    // burger nav 
    jQuery(".burger-nav").on("click", function() { 
     jQuery(".header-nav").toggleClass("open"); 
    }); 

}); 


function redirectToHome() { 

} 

/* ONE PAGE NAVIGATION FUNCTION */ 
    function setBindings() { 
    jQuery('a[href^="#"]').on('click', function(e) { 
     e.preventDefault(); 

     var home = "http://localhost/wordpress/"; 


     // Get the href attribute, which includes '#' already 
     var sectionID = jQuery(this).attr('href') + "-View"; 


     // if you're on blog page, first redirect to home -> div: #contact-View 
     if(document.URL.indexOf("http://localhost/wordpress/blog") >= 0){ 
      window.location.href = home +sectionID; 
       console.log(location.href); 


     } 

     // Animate the scroll 
     jQuery("html, body").animate({ 
     // Find target element 
     scrollTop: jQuery(sectionID).offset().top 
     }, 1000) 
    }); 
    } 

問題を解決する方法はありますか？ window.location.hrefの値を更新する際に

Answer 1

2つのことが起こることができます。

• を新しい値は（アンカーを使用して）現在のページにある場合、それはページ
をリロードせずにそのポイントにジャンプします
• 新しい値が現在のページに設置されていない場合は、JavaScriptの実行が停止し、新しいページが要求されますと

をロードanimate機能が実行されていないとの問題は、このCでは後者でありますase。

新しいページに余分な存在しないアンカー（例：＃contact-View-scroll）を追加するように要求するのが解決策です。新しいページでは、JavaScriptを使用してURLのこの特定のアンカー値を確認し、必要に応じてスクロール機能を実行することができます。

これは、問題の理解と解決に役立ちます。

更新：ハッシュタグに以下の内容を付加することで、ホームページを参照してください。リンクの更新、ブログのページで ：

ステップ1の下にいくつかのサンプルコードを追加#scroll:を（http://localhost/wordpress/home#contact-Viewがなるようにhttp://localhost/wordpress/home#scroll:contact-View）

手順2： 次のコードスニペットをホームページに追加します。これにより、#scroll:タグが検索され、存在する場合はanimate機能が有効になります。

jQuery(document).ready(function() { 
    // Get the hash from the URL 
    var hash = window.location.hash; 
    // If a hash exists && starts with "#scroll:" 
    if (hash.length and hash.indexOf('#scroll:') === 0) { 
    // Get the anchor name we are scrolling to 
    var selectionID = hash.substr('#scroll:'.length); 
    // Call the jQuery scroll function 
    jQuery("html, body").animate({ 
     scrollTop: jQuery('#'+selectionID).offset().top 
    }, 1000); 
    } 
}); 

ステップ3：お楽しみください！

また、デモについては、https://jsfiddle.net/qcarmk2wを参照してください。