javascript - 我如何水平滚动到页面中的下一篇文章(或 # 等)？

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