Javascript 切换选项卡后如何保持滚动位置？

我正在寻找一个解决方案，以保持滚动位置后，改变“标签”

例如，如果我一直向下滚动到伦敦页面，然后切换到巴黎“页面”，然后返回伦敦“页面”。我期待着我仍然在伦敦“页面”的底部。修复页面顶部的标签是必需的，我已经完成了。我创建了一个代码笔：

函数openCity（evt、cityName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

---

我在谷歌上搜索了这个问题，但没有找到任何真正能解决我的问题的解决方案。有人能帮忙吗？谢谢

您正在查找

document.documentElement.scrollTop

属性

---

当有人更改当前选项卡时，获取活动选项卡的当前滚动位置并将其应用于新选项卡。仅此而已。

您正在查找

document.documentElement.scrollTop

属性

---

当有人更改当前选项卡时，获取活动选项卡的当前滚动位置并将其应用于新选项卡。仅此而已。

如果使用jquery，可以使用获取元素的垂直滚动位置（假设滚动条绑定到该元素），该位置可以保存到变量中。使用jquery（或常规的js onScroll事件）将元素订阅到scroll事件，当它被触发时，将.scrollTop（）中的值保存到相应的变量中。单击选项卡时，使用选项卡的滚动位置变量中的值再次调用.scrollTop（），以将位置设置为以前的位置。

如果使用jquery，可以使用获取元素的垂直滚动位置（假设滚动条与该元素绑定），该位置可以保存到变量中。使用jquery（或常规的js onScroll事件）将元素订阅到scroll事件，当它被触发时，将.scrollTop（）中的值保存到相应的变量中。单击选项卡时，再次调用.scrollTop（），使用选项卡的滚动位置变量中的值将位置设置为以前的位置。

这是一个非常广泛的问题。搜索本身不太可能得到答案。你到底试过什么？例如，您是否考虑过获取当前滚动位置？这是一个非常广泛的问题。搜索本身不太可能得到答案。你到底试过什么？例如，您是否考虑过获取当前滚动位置？

      <div class="frozen">
           <div id="tabrow">
               <ul class="tab">
                  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
                  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
                  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
               </ul>
           </div>
      </div>
    <div id="London" class="tabcontent">


    </div>
    <div id="Paris" class="tabcontent">


    </div>
    <div id="Tokyo" class="tabcontent">


    </div>    
  <script>
    function openCity(evt, cityName) {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Show the current tab, and add an "active" class to the link that opened the tab
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";      
    };
  </script>