タブを切り替えた後にスクロール位置を維持する方法は？

Question

"タブ"を変更した後、スクロール位置を維持するソリューションを探しています。

たとえば、ロンドンのページまでスクロールしてから、パリの「ページ」に変更してから、ロンドンの「ページ」に戻ります。私はまだロンドンの「ページ」の一番下にいると思っています。ページ上部のタブを固定する必要があります。すでに行っています。私はGoogleでこの質問を検索しますが、本当に私の場合に動作することができます任意の解決策を見つけていなかった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>  

：私はcodepenを作成しました。誰も助けることができますか？感謝する！

Answer 1

あなたはdocument.documentElement.scrollTopプロパティを探しています。

誰かが現在のタブを変更すると、アクティブなタブの現在のスクロール位置を取得し、新しいタブに適用します。それで全部です。

Answer 2

jqueryを使用する場合は、.scrollTop()を使用して、スクロールバーがその要素に関連付けられていると仮定して、要素に垂直スクロール位置を取得できます。このスクロールバーは変数に保存できます。 jquery .scroll()（またはjs onScrollイベント）を使用して要素をスクロールイベントにサブスクライブし、トリガーされたら対応する変数に.scrollTop（）の値を保存します。タブがクリックされたら、タブのスクロール位置変数の値を使用して.scrollTop（）を呼び出して、以前の位置に位置を設定します。