0

現在、滑らかなスクロール技術を使用して 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 を検出してそれにスクロールする方法などはありますか?

4

2 に答える 2

2

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);
   });
});
于 2013-01-29T13:20:49.853 に答える
-1

div のインデックスを取得し、次にスライドします。

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

これは単なる一般的な例です。コードに合わせて調整する必要があります。

于 2013-01-29T13:20:44.903 に答える