在jquery中使用scrollTo滚动h2元素

Question

我想知道是否有人可以使用jquery的scrollTo插件帮助我解决这个滚动问题。我希望能够一键滚动一次一个h2元素...在我的脚本中，它一键滚动所有h2元素..请帮助我！

 $(document).ready(function(){

 $('#down').click(function(){

  $("#container h2").each(function(i,h2){
   $("#wrap").scrollTo(h2, 800, { axis:'y' });

     });
    });

 $('#up').click(function(){

      $("#container h2").reverse().each(function(i,h2){
   $("#wrap").scrollTo(h2, 800, { axis:'y' });
     });
    });
 jQuery.fn.reverse = function() {

  return this.pushStack(this.get().reverse(), arguments);

};
});

Answer 1

好吧，您正在调用 each()，因此每次点击都会滚动到每个 h2。跟踪您传递的滚动到的元素，并且仅滚动到下一个元素，例如：

 $(document).ready(function(){
     var next = 0;
     $('#down').click(function(){
        $("#wrap").scrollTo($("#container h2").eq(next), 800, { axis:'y' });
        next++;
     });
 });

更新：

您必须确保计数器不会增加或减少太多。我还对其进行了一些更改，以便不总是使用选择器来查找所有 h2 元素。获得一次就足够了。当您位于最后一个元素并单击 down 时（或者当您位于第一个元素并单击 up 时），计数器检查也应该可以解决问题：

 $(document).ready(function(){
     var elements = $("#container h2");
     var next = 0;
     var max = elements.length;
     $('#down').click(function(){
        if(next+1 < max) {
            next++;
            $("#wrap").scrollTo(elements[next], 800, { axis:'y' });
        }
     });

     $('#up').click(function(){
        if(next-1 > -1) {
            next--;
            $("#wrap").scrollTo(elements[next], 800, { axis:'y' });
        }
     });
 });