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

Question

我正在尝试使用在 http://marcgrabanski 找到的 jQuery 脚本。 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 
        } 
      }); 
    }); 
});