Question

我正在寻找一种解决方案，在更改“标签”后保持滚动位置。

例如，如果我一直向下滚动到伦敦页面，然后切换到巴黎“页面”，然后返回伦敦“页面”。我期待着我仍然处于伦敦“页面”的底部。修复页面顶部的选项卡是必需的，我已经完成了。我创建了一个codepen：http://codepen.io/yiou/pen/rrKwKx

      <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>

我在谷歌搜索这个问题，但没有找到任何真正可以解决我案例的解决方案。有人可以帮忙吗？欣赏！

Answer 1

您正在寻找document.documentElement.scrollTop财产。

当有人更改当前标签时，获取活动标签的当前滚动位置，并将其应用于新标签。这就是全部。

Answer 2

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

切换标签后如何保持滚动位置？

2 个答案: