How to scroll horizontally to the next article on a page (or #, etc.)?

Question

I am trying to work with a jQuery script that I found at http://marcgrabanski.com/articles/scrollto-next-article-button-jquery , which allows me to customize the "next" and "previous" buttons that scroll the user through the page from one article to another (or previous). The idea is that the button stays in a fixed position and clicks the button several times so that the user scrolls through the next article (or other item).

I have a page that scrolls horizontally, so I want to adapt the code so that instead of finding the top of each h2 in the container, it finds the left side of each h2 and scrolls the user horizontally rather than vertically. Here is the code I'm using:

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 } }); }); }); 

Any help is greatly appreciated in advance. Thanks.

Jp

---

@paulGraffix, @ShankarSangoli and @esses thank you for your answers.

As a continuation of my last question, how can I limit scrolling to just horizontal scrolling?

If you click on the arrows at the top http://174.121.134.126/~methfree/ , the window will scroll vertically (as well as horizontally) if the browser window is small enough to scroll vertically. Is there a way to add scroll-x (or something like that) to the script to restrict horizontal scrolling only?

Thanks,

Jp

Answer 1

Basically, you should just turn off all vertical links to horizontal links, and that should work. Try something like this:

 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

try it

 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

you can change your code with offsetLeft (or offsetRight) instead of using (window) .scrollTop.

this link may be useful: http://unknownerror.net/2011-04/top-clienttop-scrolltop-offsettop-the-difference-between-memo-4017