在window.location.replace后触发Scroll toTop

Trigger Scroll toTop after window.location.replace JQuery

本文关键字：Scroll toTop window location replace      更新时间：2023-09-26

我希望有人能帮我解决这个编程问题我有。

我有一个footer.php文件，它链接到另一个页面上的一系列bs-tab组-让我们说about.php(为了方便讨论)。我希望使用JQuery完成的任务流程如下:

(假设我们在index.php上)

  1. 点击footer.php中的链接到about.php的标签组。
  2. 链接到正确的标签组。
  3. 加载页面并滚动到页面顶部完成。这模仿了网站的其他页面加载行为。这就是为什么这需要发生的原因。

我遇到的问题是，当在同一页面上，这些选项卡组驻留(about.php)的链接工作正常:

单击事件> TAB组更改>活动的nav-tab状态切换>页面滚动到顶部

然而，当在另一个页面上(比如从index.php路由到about.php)，会发生以下情况:

单击事件> TAB组更改>活动的nav-tab状态切换>哈希锚指向页面顶部，但不滚动到页面顶部。

我已经运行了一个快速测试，发现序列似乎有问题后，我们从index.php更改为about.php: 

window.location.replace(link_url);

一旦窗口位置发生变化，我如何完成编程序列?

这是我的代码，提前谢谢你:

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

您错过的是，当您执行window.location.replace(link_url)时，您的整个页面呈现。基本上，您永远不会达到$(this).tab('show')，以及以下的任何内容。

你应该做的是添加另一个参数到你的URL(或存储在LocalStorage，例如)，然后在页面加载时检查这个参数。

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

然后在你的文档中。准备好检查这个参数并滚动到顶部。

$(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
   }
   ...
}
相关文章：