Question

I’m trying to work with a jQuery script I found at http://marcgrabanski.com/articles/scrollto-next-article-button-jquery that allows me to set up “next” and “previous” buttons that scroll the user through a page from one article to the next (or previous). The idea is that the button would stay in a fixed position and clicking the button multiple times would keep the user scrolling on to the next article (or other element).

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 and not 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. Thank you.

jP

---

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

As a follow-up to my last question, how would I go about limiting the scroll to scroll horizontally only?

If you click on the arrows at the top of 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 any way to add a scroll-x (or something like that) to the script to limit the scroll to horizontal only?

Thanks,

jP

Answer 1

Basically you should just be able to switch out all the vertical references to horizontal ones and it 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 
        } 
      }); 
    }); 
});