Trigger Scroll toTop после window.location.replace JQuery

Question

Я надеюсь, что кто-то может помочь мне решить эту проблему программирования, которую у меня есть.

У меня есть файл footer.php, который ссылается на группу групп bs-tab на другой странице - скажем about.php (для аргументации). Поток задача, которую я ищу, чтобы закончить с помощью JQuery выглядит следующим образом:

(Скажем, мы на index.php)

1. Нажмите на ссылку в footer.php на вкладку группы по about.php.
2. Ссылка направляется в нужную группу вкладок.
3. Загружает страницу и заканчивается прокруткой вверху страницы. Это подражает остальной части поведения загрузки страницы сайта. Вот почему это должно произойти.

Проблема, которую я имею, что, когда на той же странице, что эти вкладки группы находятся (about.php) ссылка работает нормально:

событие щелчка> вкладка группы меняется> активный нав-вкладка состояния переключению > страница прокручивается к началу

Когда на другой странице, однако (скажем, от index.php маршрутизации к about.php), происходит следующее:

нажмите событие> вкладка группы изменений> активные вкладки нав состояние переключит> хэш анкеры в верхней части страницы, но не прокручивается до верхней части страницы.

я запустить быструю проверку и обнаружил, что последовательность, кажется, есть проблемы после того, как перейти от index.php к about.php:

window.location.replace(link_url); 

Как я могу завершить последовательность программирования после того, как местоположение окна есть изменилось?

Вот мой код и спасибо заранее:

HTML - найдено в 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

То, что вы пропустите что когда вы делаете window.location.replace(link_url), вся ваша страница rerenders. В принципе, вы никогда не достигаете $ (this) .tab ('show') и ничего ниже.

Что вам нужно сделать, это добавить еще один параметр к вашему URL-адресу (например, сохранить его в LocalStorage), а затем проверить этот параметр при загрузке страницы.

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

Затем в документе document.ready проверьте этот параметр и прокрутите вверх.

$(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 
    } 
    ... 
}