在 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) 时，您的整个页面都会重新呈现。基本上，您永远不会到达 $(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
   }
   ...
}