Question

我希望有人可以帮我解决我遇到的编程问题。

我有一个footer.php文件链接到另一个页面上的一系列bs-tab组 - 让我们说about.php（为了参数的缘故）。我希望使用JQuery完成的任务流程如下：

（让我们说我们在index.php上）

单击footer.php中的链接到about.php上的选项卡组。
将路线链接到正确的选项卡组。
加载页面并滚动到页面顶部完成。这模仿了网站的其他页面加载行为。这就是为什么需要这样做的原因。

我遇到的问题是，当这些标签组位于同一页面上时（about.php）链接正常工作：

点击事件＆gt;标签组更改＆gt;有效的nav-tab状态切换＆gt;页面滚动到顶部

但是在另一个页面上（比如从index.php路由到about.php），会发生以下情况：

点击事件＆gt;标签组更改＆gt;有效的nav-tab状态切换＆gt; hash hash butts到页面顶部，但不会滚动到页面顶部。

我运行了一个快速测试，发现从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)时，您的整个页面都会重新呈现。基本上，你永远不会达到$（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
   }
   ...
}

在window.location.replace JQuery之后触发Scroll toTop

1 个答案: