자바 스크립트로 페이지로드 사이의 스크롤 위치 유지

저는 HTML5와 CSS3를 이해하지만 자바 스크립트를 잘 이해하지 못하는 초보자입니다. 내 사이트에서 다른 페이지를 클릭하는 동안 브라우저를 동일한 스크롤 위치에 유지하려고합니다. 이 페이지는 illustration.html, design.html 및 brochures.html입니다. 새 페이지를로드 할 때마다 맨 위로 이동하면 조금 실망하게됩니다. 그래서 아래 HTML5 예제가 있습니다.자바 스크립트로 페이지로드 사이의 스크롤 위치 유지

<!DOCTYPE html> 
     <html lang="en"> 
      <head> 
       <script src="../js/browser.js" type="text/javascript"></script> 
      </head> 
      <body> 
       <section> 
        <header><title>design</title></header> 
         <article> 
           <div id="illustration"> 
            <a href="illustration.html">illustration</a> 
           </div> 

           <div id="design"> 
            <a href="#">design</a> 
           </div> 

           <div id="brochures"> 
            <a href="brochure.html">brochures</a> 
           </div> 
         </article> 
       </section> 
      </body> 
     </html>

페이지 사이를 클릭 할 때 스크롤 위치를 유지하는 간단한 JavaScript가 있습니까?

출처

2014-07-10 heyMot141

정상적인 브라우저 동작이며 대부분의 사용자는 정상으로 이동한다고 기대합니다. 왜 좌절하는지 보여줄 수 있습니까? – putvande

3 페이지 모두 가운데에 정보가 있기 때문에 실망 스럽습니다. 그래서 정보를 아래로 스크롤하면 다음 페이지를 클릭하여 같은 위치에 배치하고 다시 모든 페이지를 다시 스크롤해야합니다. – heyMot141

실제로는 아닙니다. 이것을 시도하여 모든 페이지에 대해 닫는 </body> 태그 바로 위에 두십시오. 면책 조항 : 그것은 단지 의사 코드 (테스트하지 않았 음)입니다.

<script> 
document.addEventListener('DOMContentLoaded', function() { 
    if(typeof(Storage) !== 'undefined') { 
     // See if there is a scroll pos and go there. 
     var lastYPos = +localStorage.getItem('scrollYPos'); 
     if (lastYPos) { 
      console.log('Setting scroll pos to:', lastYPos); 
      window.scrollTo(0, lastYPos); 
     } 

     // On navigating away first save the position. 
     var anchors = document.querySelectorAll('article a'); 

     var onNavClick = function() { 
      console.log('Saving scroll pos to:', window.scrollY); 
      localStorage.setItem('scrollYPos', window.scrollY); 
     }; 

     for (var i = 0; i < anchors.length; i++) { 
      anchors[i].addEventListener('click', onNavClick); 
     } 
    } 
}); 
</script>

이 이론적으로하고있는 무엇 :

"그것은 스크롤 위치를 설정 한 경우가 확인 않으면 브라우저가 로컬 스토리지를 지원하는 경우 문서가 준비 체크 인 경우는 그 다음에 이동 한 경우.. 위치."

다음 페이지가 충분히 긴 경우 당신이 알지도 못하는

참고 "사용자가 링크를 클릭하십시오. 스토리지 위치를 저장을 클릭하면". 또한 이것은 비정상적이고 불법적 인 행동입니다.

출처

2014-07-10 16:34:18

정말 대단히 감사합니다!, 나는 언젠가 이런 자바 스크립트를 쓸 수 있기를 바랍니다. – heyMot141

아, 코드가 처음 작동하는 경우는 거의 없습니다. 한 가지는 HTML 트리에서 요소를 준비 할 때 검사하지만 이미지가 페이지 높이에 영향을 줄 수 있는지 확인하지 않습니다. 즉, 빠르게 스크롤 할 수는 있지만 정확하지 않을 수도 있음을 의미합니다. 모든 리소스가'window.addEventListener ('load', function() {'대신에로드됩니다.) –

@ Dominic hats to brother brother !!!! – EasyE

쿠키/세션 내의 각 스크롤 이벤트에서 스크롤 위치를 저장하고 다음에 발생하는 페이지로드에서 스크롤 위치를 마지막으로 알려진 위치로 설정하거나 페이지를 Ajax를 통해 바꿀 수 있습니다 . 어느 쪽이든, 그것은 쉽지 않으며 질문에 대한 의견에 이미 언급 한 바와 같이, 대부분의 사용자는 다음 페이지가 다시 정상으로 돌아올 것으로 기대합니다. 그러나 단일 페이지 레이아웃에 관심이있는 것처럼 들립니다. 다음은 몇 가지 예입니다. http://onepagelove.com/

출처

2014-07-10 16:31:50 wiesion

자바 스크립트로 페이지로드 사이의 스크롤 위치 유지

답변

관련 문제