ページ（または＃など）内の次の記事に水平にスクロールする方法はありますか？

Question

私はhttp://marcgrabanski.com/articles/scrollto-next-article-button-jqueryで見つけたjQueryスクリプトを使って作業しようとしています。これは、1つの記事から次のページ（またはそれ以前のページ）までユーザーをスクロールする「次へ」と「前の」ボタンを設定できます。その考え方は、ボタンが固定位置に留まり、ボタンを複数回クリックすると、ユーザーは次の記事（または他の要素）にスクロールし続けるということです。

私は水平方向にスクロールするページを持っているので、コンテナ内の各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/の上部にある矢印をクリックすると、ブラウザウィンドウが垂直方向にスクロールできるほど小さい場合、ウィンドウは垂直方向（水平方向と同様に）にスクロールします。スクロールを水平にのみ制限するために、スクロール-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