Как бы я прокрутил по горизонтали следующую статью на странице (или # и т. Д.)?

Question

Я пытаюсь работать со скриптом jQuery, который я нашел в http://marcgrabanski.com/articles/scrollto-next-article-button-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

вы можете изменить свой код, используя offsetLeft (или offsetRight) вместо использования (window) .scrollTop.

эта ссылка может быть полезна: http://unknownerror.net/2011-04/top-clienttop-scrolltop-offsettop-the-difference-between-memo-4017

Answer 3

Попробуйте это

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