Working with jQuery selectors - ScrollTo

Question

I am working with the jQuery ScrolTO plugin: http://demos.flesler.com/jquery/scrollTo/ at this site: www.imfrom.me

I have the arrows to navigate up and down and as of now I am using:

 $('.down_stream').click(function(){
  $.scrollTo( '#stream', 1500, {easing:'easeOutElastic'} );  
 });

So on click of .down_stream go to #stream, aka the down arrow to take you to stream. I have been trying to read and figure out a jQuery selector to take care of that to move to the NEXT segment without copy/pasting that snippet 15+ times for both up and down movement.

I couldnt figure out anything. Each segment is wrapped within this block:

<div id="stream" class="box">
  <div class="grid_12 arrow up_home">
   &uarr;
  </div>
  <div class="grid_2"><div class="number-heading">01.</div></div>
  <div class="grid_10">
   <h2 class="content_title">what's been new?</h2>

   <p>Blah blah blah blah...</p>
  </div>
  <div class="grid_12 arrow down_about">
   &darr;
  </div>
 </div><!-- end strean -->

Any ideas on how I could achieve this? Thank you so much,

Ryan

Answer 1

Not a jQuery expert, but I'll give it a stab. If I understand properly, it's the '#stream' part that has to change each time you click the up/down arrow. So each div will have a different id and you need to feed those to this little snippet to get it to scroll?

Use an array and an integer var to keep track of which way to move in the array.

//initialize the array w/ your 15 div names
var divNames = ["#stream", "#nextDivName", "#andTheNext", "#yetAnotherDivName"];

var index = 0;

function moveUp()
{
  if((index - 1) >= 0){index--;}
  move(index);
}
function moveDown()
{
  if((index + 1) < (divNames.length)){index++;}
  move(index);
}
function move(p_Index)
{
   $.scrollTo( divNames[p_Index], 1500, {easing:'easeOutElastic'} );
}

Button clicks now call the moveUp() & moveDown() functions.

Hope that helps.