탭 전환 후 스크롤 위치를 유지하는 방법은 무엇입니까?

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()을 다시 호출하여 위치를 이전 위치로 설정합니다.