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

Answer 2

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

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 3

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

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

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

3 个答案: