Trigger Scroll toTop after window.location.replace JQuery

Question

I hope someone could help me resolve this programming problem I am having.

I have a footer.php file that links to a series of bs-tab groups on another page - let's say about.php (for argument's sake). The task flow I am looking to complete using JQuery is as follows:

(Let's say we are on index.php)

1. Click the link in footer.php to a tab group on about.php.
2. Link routes through to the correct tab group.
3. Loads the page and finishes by scrolling to the top of the page. This mimics the rest of the site's page loading behaviours. Which is why this needs to happen.

The issue I am having is that when on the same page that these tab groups reside (about.php) the link works fine:

click event > tab group changes > active nav-tab state toggles > page scrolls to top

When on another page however (say from index.php routing to about.php), the following happens:

click event > tab group changes > active nav-tab state toggles > hash anchor butts to the top of the page, but does not scroll to top of page.

I have run a quick test and found that the sequence seems to have problems after we change from index.php to about.php:

window.location.replace(link_url);

How can I complete the programming sequence once the window location has changed?

Here is my code and thank you in advance:

HTML - found in footer.php:

 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 footer-links">
        <h3>Tab Groups</h3>
        <ul>
        <li class="tab1"><a class="active" href="/link#hashtag1" data-toggle="tab">hashtag1</a></li>
        <li class="tab2"><a href="/link#hashtag2" data-toggle="tab">hashtag2</a></li>
        <li class="tab3" ><a href="/link#hashtag3" data-toggle="tab">hashtag3</a></li>
        </ul>
 </div>

JS:

$('.footer-links a').on('click', function(e) {

    var link_url = $(this).attr('href');
    var link_hash = link_url.substring(link_url.indexOf('#')+1);
    var totalLink = window.location.pathname + '#' + link_hash;

    if (totalLink !== link_url) {
        window.location.replace(link_url);
    }

    $(this).tab('show');

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var activeTab = this.href.split('#');
        $('.nav a').filter('[href="#'+activeTab[1]+'"]').tab('show');
    });

//below doesn't happen after the page loads

    if($(window).scrollTop() > 0){
        $('html, body').animatescroll({scrollSpeed:1000,easing:'easeOutQuint',padding:0});
    } else {
        $(window).scrollTop(0);
    }

});

Answer 1

What you miss is that when you do window.location.replace(link_url), your entire page rerenders. Basically, you never reach $(this).tab('show'), and anything below.

What you should do is add another parameter to your URL (or store it in LocalStorage, for example), then check this parameter on page load.

if (totalLink !== link_url) {
    window.location.replace(link_url + "&top=true");
}

Then in your document.ready check this parameter and scroll to top.

$(document).ready(function() {
   ...
   // This is simplified version
   // For a robust version check this: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
   var params = location.search.split("=");
   if (params.indexOf("top=true") >= 0) {
      scrollToTop(); //same as you did in your onClick, extract it outside
   }
   ...
}