如何水平滚动到页面中的下一篇文章（或 # 等）？答案

【问题标题】：How would I scroll horizontally to the next article in a page (or #, etc.)?如何水平滚动到页面中的下一篇文章（或 # 等）？
【发布时间】：2011-10-24 13:34:31
【问题描述】：

我正在尝试使用我在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 
        } 
      }); 
    }); 
});

提前非常感谢任何帮助。谢谢。

@paulGraffix、@ShankarSangoli 和 @esses 感谢您的回复。

作为我上一个问题的后续，我将如何限制滚动以仅水平滚动？

如果您单击http://174.121.134.126/~methfree/ 顶部的箭头，如果浏览器窗口小到可以垂直滚动，则窗口将垂直（以及水平）滚动。有没有办法在脚本中添加一个 scroll-x （或类似的东西）来限制滚动到水平？

谢谢，

【问题讨论】：

标签： javascript jquery scroll horizontal-scrolling

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

您可以使用 offsetLeft（或 offsetRight）而不是使用 (window).scrollTop 来修改您的代码。

此链接可能会有所帮助：http://unknownerror.net/2011-04/top-clienttop-scrolltop-offsettop-the-difference-between-memo-4017

【讨论】：

【解决方案3】：

基本上，您应该能够将所有垂直引用切换为水平引用，它应该可以工作。试试这样的：

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

【讨论】：