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

How would I scroll horizontally to the next article in a page (or #, etc.)?

本文关键字：一篇 文章 水平 何水平 滚动      更新时间：2023-09-26

我正在尝试使用我在http://marcgrabanski.com/articles/scrollto-next-article-button-jquery上找到的jQuery脚本，该脚本允许我设置"下一个"answers"上一个"按钮，这些按钮可以将用户从一篇文章滚动到下一篇(或上一篇)。这个想法是，按钮将保持在一个固定的位置，并点击按钮多次将保持用户滚动到下一篇文章(或其他元素)。

我有一个页面水平滚动，所以我想调整代码，而不是在容器中找到每个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/顶部的箭头，如果浏览器窗口足够小可以垂直滚动，则窗口将垂直滚动(以及水平滚动)。有没有办法添加滚动x(或类似的东西)的脚本，以限制滚动水平只?

谢谢,

jP

基本上你应该能够把所有的垂直引用切换到水平引用，它应该工作。试试这样做:

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

您可以使用offsetLeft(或offsetRight)来修改代码，而不是使用(window). scrolltop .

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

试试这个

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 
        } 
      }); 
    }); 
});
相关文章：