페이지 (또는 # 등)의 다음 기사로 가로로 어떻게 스크롤합니까?

Question

http://marcgrabanski.com/articles/scrollto-next-article-button-jquery에있는 jQuery 스크립트를 사용하여 한 페이지에서 다음 페이지 (또는 이전 페이지)로 사용자를 스크롤하는 '다음'및 '이전'버튼을 설정할 수 있습니다. 아이디어는 버튼이 고정 된 위치에 머물러 있고 버튼을 여러 번 클릭하면 사용자가 다음 기사 (또는 다른 요소)로 계속 이동한다는 것입니다.

가로로 스크롤되는 페이지가 있으므로 컨테이너의 각 h2 상단을 찾는 대신 각 h2의 왼쪽을 찾아 사용자를 가로로 그리고 세로로 스크롤하지 않도록 코드를 수정하고 싶습니다. 다음은 내가 사용하고있는 코드입니다 :

jQuery(function($){ 
    $('<div id="next_arrow">Next</div>') 
    .prependTo("body") //append the Next arrow div to the bottom of the document 
    .click(function(){ 
     scrollTop = $(window).scrollTop(); 
     $('#container h2').each(function(i, h2){ // loop through article headings 
     h2top = $(h2).offset().top; // get article heading top 
     if (scrollTop<h2top) { // compare if document is below heading 
      $.scrollTo(h2, 800); // scroll to in .8 of a second 
      return false; // exit function 
     } 
     }); 
    }); 
}); 

어떤 도움을 주시면 감사하겠습니다. 고맙습니다.

JP

---

@paulGraffix, @ShankarSangoli 및 @esses는 답변 주셔서 감사합니다.

마지막 질문에 대한 후속 작업으로, 스크롤을 수평으로 만 스크롤하도록 제한하는 방법은 무엇입니까?

http://174.121.134.126/~methfree/ 상단의 화살표를 클릭하면 브라우저 창이 수직으로 스크롤 할 수있을만큼 작 으면 창이 세로로 (뿐만 아니라 수평으로) 스크롤됩니다. 스크롤을 수평으로 만 제한하기 위해 scroll-x (또는 이와 비슷한)를 스크립트에 추가하는 방법이 있습니까?

감사합니다,

JP

Answer 1

은 기본적으로 당신은 단지 수평 것들에 대한 모든 수직 참조를 전환 할 수 있어야 시도하고 작동합니다. 이런 식으로 뭔가를 시도 :

jQuery(function($){ 
    $('<div id="next_arrow">Next</div>') 
    .prependTo("body") //append the Next arrow div to the bottom of the document 
    .click(function(){ 
     scrollLeft = $(window).scrollLeft(); 
     $('#container h2').each(function(i, h2){ // loop through article headings 
     h2Left = $(h2).offset().left; // get article heading left 
     if (scrollLeft<h2Left) { // compare if document is left of heading 
      $.scrollTo(h2, 800); // scroll to in .8 of a second 
      return false; // exit function 
     } 
     }); 
    }); 
}); 

Answer 2

이

jQuery(function($){ 
    $('<div id="next_arrow">Next</div>') //item to be added 
    .prependTo("body") //append the Next arrow div to the bottom of the document 
    .click(function(){ 
     scrollLeft = $(window).scrollLeft(); 
     $('#container h2').each(function(i, h2){ // loop through article headings 
     h2left = $(h2).offset().left; // get article heading left 
     if (scrollLeft < h2Left) { // compare if document is below heading 
      $.scrollTo(h2, 800); // scroll to in .8 of a second 
      return false; // exit function 
     } 
     }); 
    }); 
}); 

Answer 3

는 대신 (창) .scrollTop를 사용 offsetLeft (또는 offsetRight)를 사용하여 코드를 수정할 수 있습니다.

이 링크는 도움이 될 수 있습니다 http://unknownerror.net/2011-04/top-clienttop-scrolltop-offsettop-the-difference-between-memo-4017