scrollToに位置インデックスを渡す方法

Question

自分のプロジェクトの1つにlocalscroll/scrolltoを実装しました。 昨日以来、サイト全体をスクロールしていたナビゲーションは1つしかありませんでした。

しかし、ページコンテンツの次または前のセクションにスクロールするために、2つの別々の矢印（前/次）を追加する必要があります。

私はjqueryのレベルで持っていることは次のとおりです。

$('#menu').localScroll(800); //this is for upper menu (simple ul/li/a) 


// this whole code below is for those two arrows: prev/next 
function scrollToPosition(element) { 
    if (element !== undefined) { 
     $("body").scrollTo(element, 800, { 
      margin: true 
     }); 
    } 
} 


$(function() { 

    //Create an Array of section 
    var section = $('#container .section'); 
    position = 0; //Start Position, its 0 by default and here is my problem 
    var next = $('.next'); 
    var prev = $('.prev').hide(); 

    next.click(function(evt) { 
     //Scroll to next position 
     prev.show(); 
     scrollToPosition(section[position += 1]); 
     if (position === section.length - 1) { 
      next.hide(); 
     } 
    }); 

    prev.click(function(evt) { 
     //Scroll to prev position  
     next.show(); 
     scrollToPosition(section[position -= 1]); 
     if (position === 0) { 
      prev.hide(); 
     } 
    }); 

}); 

あなたが見ることができるどこの位置= 0; - 私の問題です、私はクリックされたメニューリンクのインデックスを渡したいと思います。

上のメニューには10個のリンクがあります。 5番目をクリックすると前/次の矢印がわかり、位置を5にしたいので、5番目のコンテンツコンテナにスクロールしてprev/nextをクリックすると0から始まります。

ありがとうございます！

Answer 1

グローバル変数を設定し、そのグローバル変数の値を更新する10個のリンクにonClick関数をバインドします。次に、position = 0を指定すると、実行時にグローバル変数を参照して位置を設定します。

var position = 0; 

function setPosition(linkID){ 
     if (linkID !== undefined) { 
      if (linkID < 11) { //Or whatever other varchecking 
       position = linkID; 
      } 
     } 
    } 

    $(function() { 

    //Create an Array of section 
    var section = $('#container .section'); 
    //Position is already set here 
    } 
    </script> 


    <a href='#link1' onClick='setPosition(1);'>Do Stuff!</a> 

あなたは/それをovercomplicate他のものを行うことができますが、それは、迅速かつ汚い

Answer 2

は、私はあなたがそうあなたがいるその要素にスクロールすることができますクリックしたメニュー項目のインデックスを取得したい、その後適切に理解していればですjQueryオブジェクトに格納されます。この要素を.scrollTo()関数に渡します。この関数は、要素の位置を取得します。このような場合は、その後：

$('ul').children().bind('click', function() { 
    var index = $(this).index(); 
    scrollToPosition(section[index]); 
}); 

これは（<li>要素が<ul>要素の直接の子であると仮定した場合）その子を見つけ、<ul>要素あなたのメニューを対象とし、その後に<li>要素にclickイベントハンドラをバインドクリックされた要素のインデックスを取得します（<li>の要素はすべてDOMの同じ層にあり、すべての兄弟であるため、要素ではなく<li>要素でこれを行う方が簡単です）。ここで

は.index()のドキュメントです：http://api.jquery.com/index

それはグローバル変数ではありませんので、また、あなたがインフロントあなたのposition変数宣言のvar文を置く必要があります（それはまだ、document.readyイベントハンドラからアクセスできるようになりますこの情報にアクセスし、コードの一部のみ）：

$（関数（）{

//Create an Array of section 
var section = $('#container .section'), 
    position = 0, //Start Position, its 0 by default and here is my problem 
    next  = $('.next'), 
    prev  = $('.prev').hide(); 

お知らせ変数declaratイオンはコンマで区切られ、現在のスコープ内にそれらをすべて追加します。

Answer 3

//Store the index when clicked on any menu 
$('#menu li').click(function(){ 
    $(this).parent().data("menuindex", $(this).index()); 
}); 

//Here you can use that index to determine the position 
next.click(function(evt) { 
    position = ($('#menu').data('menuindex') || 0) 
    //Scroll to next position 
    prev.show(); 
    scrollToPosition(section[position += 1]); 
    if (position === section.length - 1) { 
     next.hide(); 
    } 
}); 

prev.click(function(evt) { 
    position = ($('#menu').data('menuindex') || 0) 
    //Scroll to prev position  
    next.show(); 
    scrollToPosition(section[position -= 1]); 
    if (position === 0) { 
     prev.hide(); 
    } 
}); 

Answer 4

アクティブな要素を追跡するためにクラスを使用します。その後、オフセット位置を使用してスクロールして表示します。これにより、グローバル変数やその他のハッキングの必要性が排除されます。このコードは少しまとめることができますが、前提は健全です。

http://jsfiddle.net/aVvQF/25/

$('#prev').click(function() { 
    var $targetElement = $('.active').prev('.section'); 

    if (!$targetElement.length) {return;} 
    $('.active').removeClass('active'); 
    $targetElement.addClass('active'); 

    //scroll element into view  
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000); 
}); 

$('#next').click(function() { 
    var $targetElement = $('.active').next('.section'); 

    if (!$targetElement.length) {return;} 
    $('.active').removeClass('active'); 
    $targetElement.addClass('active'); 

    //scroll element into view  
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000); 
});