Как сохранить положение прокрутки после переключения вкладок?

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), и когда он будет запущен, сохраните значение из .scrollTop() в соответствующую переменную. Когда нажата вкладка, снова вызовите .scrollTop() со значением в переменной позиции прокрутки вкладки, чтобы установить положение туда, где оно было раньше.