平滑滚动到下一个div

Question

我目前正在使用平滑滚动技术从div滚动到div，基本上我有一整堆的div，一个接一个，当你点击当前的div时，它会把你带到下一个，等等。

但这就是我遇到问题的地方，因为目前我必须为每个div设置#来告诉它转到下一个div。下面是我的代码，它可能更有意义：

HTML：

        <a href="#slide-2"><div id="slide-1" class="slides">
            <div class="text">
ONE
            </div>
        </div></a>

         <a href="#slide-3"><div id="slide-2" class="slides">
            <div class="text">
TWO 
            </div>
        </div></a>  

        <a href="#slide-4"><div id="slide-3" class="slides">
            <div class="text">
THREE
            </div>
        </div></a>  

        <a href="#slide-5"><div id="slide-4" class="slides">
            <div class="text">
FOUR
            </div>
        </div></a>  

        <a href="#slide-6"><div id="slide-5" class="slides">
            <div class="text">
FIVE
            </div>
        </div></a>  

        <a href="#slide-7"><div id="slide-6" class="slides">
            <div class="text">
SIX
            </div>
        </div></a>

jQuery：

$(document).ready(function(){
   $('a[href*=#]').bind('click', function(e) {
    e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump

    var target = $(this).attr("href"); //Get the target

    // perform animated scrolling by getting top-position of target-element and set it as scroll target
    $('html, body').stop().animate({ scrollTop: $(target).offset().top }, 400, function() {
         location.hash = target;  //attach the hash (#jumptarget) to the pageurl
    });

    return false;
   });
});

正如你所看到的，幻灯片-1的href会把你带到幻灯片-2，以此类推，但最后会有相当多的div，随着时间的推移会添加更多的div，所以我想知道是否有更简单的方式从div滚动到div，即是否有一种方法可以检测下一个div并滚动到它，等等？

Answer 1

您可以向a元素添加类并使用next和find方法。

$(document).ready(function(){
   $('a.className').on('click', function(e) {
      e.preventDefault(); 
      var offset = $(this).next().find('div').offset().top;
      $('html, body').stop().animate({ scrollTop: offset }, 400);
   });
});

您还可以选择元素并缓存对象：

$(document).ready(function(){
   var $a = $('a.className'), $targets = $('div.targets');
   $a.on('click', function(e) {
      e.preventDefault(); 
      var i = $a.index(this);
      var offset = $targets.eq(++i).offset().top;
      $('html, body').stop().animate({ scrollTop: offset }, 400);
   });
});

Answer 2

获取div的索引并滑到下一个。

$(".linkToNextDiv").click(function(e)
{
    var parent = $(this).parent("div");
    var index = $(parent).index();
    scrollToDiv(index+1);
});

这只是一个通用的例子。您需要根据您的代码对其进行调整。