一页滚动：尝试重定向到主页并滚动到div-不起作用？

Question

Right, I've been at it for a while now. One page scroll works on home page (where the div ids are defined).

Problem: FROM blog page, if a user clicks 'contact', I want them to be redirected to the home page THEN animated scroll to the #contact-View div.

Attempt: I've tried to check if user clicks a tag, then check if there are now blog page using if statement , then redirect them back to home page (and to the div) using
window.location.href = home +sectionID;

Not working.

header.php (only the nav bit..)

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

front-page.php (home)

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

Any ideas how to fix the problem?

Answer 1

Two things can happen when updating the value of window.location.href :

• If the new value is located at the current page (by using an anchor), it will jump to that point without reloading the page
• If the new value is not located at the current page, JavaScript execution will stop and the new page will be requested and loaded

The problem with the animate function not executing is the latter in this case.

A solution would be to request the new page appended by an extra non-existent anchor ( #contact-View-scroll , for example). On the new page, you could use JavaScript to check for this particular anchor value in the URL and execute the scroll functionality if necessary.

Hope this helps in understanding and solving your problem.

update : added some example code below

Step 1: On the blog page, update the links that refer to the home page by prepending the following content to the hashtag: #scroll: (Such that http://localhost/wordpress/home#contact-View becomes http://localhost/wordpress/home#scroll:contact-View )

Step 2: Add the following code snippet to the home page. This will search for the #scroll: tag and activate the animate function if present.

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

Step 3: Enjoy!

Also, see https://jsfiddle.net/qcarmk2w for a demo.