Question

我目前正在使用平滑滚动技术从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;
   });
});

正如你所看到的，slide-1的href将你带到slide-2，依此类推，但最后会有相当多的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);
});

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

平滑滚动到下一个div

2 个答案: