anchor link to multiple classes instead of id's with jquery

Question

I have a page with up and down arrows that are links that float on the left. I want them to navigate between div's on the page as a scrolling anchor links. Here is what I have so far.....I know the jquery is far from complete but I think im going in the right direction. Any help would be great.

JSFIDDLE: http://jsfiddle.net/t8uaQ/

HTML:

<ul id="et-float-menu">
   <li class="et-float-menu-item1">
       <a href="#scroll"> <span><img></span> </a>
   </li>
   <li class="et-float-menu-item2">
       <a href="#scroll"> <span><img></span> </a>
   </li>
</ul>     
<div class="jumptosection" id="section1">
   <h2>Section 1</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

   <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section2">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section3">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section4">
    <h2>Section 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    

MY CSS:

#section1 {
  padding:20px;
  margin:10px;
  background-color:#f8f8f8;
}

#section2 {
  padding:20px;
  margin:10px;
  background-color:#e8e8e8;
}

#section3 {
  padding:20px;
  margin:10px;
  background-color:#f8f8f8;
}

#section4 {
  padding:20px;
  margin:10px;
  background-color:#e8e8e8;
}

#et-float-menu {
  position: fixed;
  z-index: 11;
  left: 0;
  top: 45%;
  background-color: #000;
  padding: 20px 10px 10px 15px;
  margin: 0;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

#et-float-menu a {
  padding: 0;
  clear: both;
  float: left;
  margin-bottom: 10px;
  color: #fff;
}

#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }

#et-float-menu li {
  display: block;
  margin-left: 0;
}


.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }

JQUERY:

jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
    jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
    return false;
});
});

Answer 1

Change hrefs of your <a> to scrollUp and scrollDown correspondingly.

Stick to some .selected class, which will be used for identifying current selected section. Add this class to the first section in html.

Add a function that will perform selection: by adding .selected class and scrolling to newly selected div.

function changeSelection(sectionFrom, sectionTo) {
    if(sectionTo.length > 0) {
        sectionFrom.removeClass("selected");
        sectionTo.addClass("selected");
        $("body").animate({scrollTop: sectionTo.offset().top});
    }
}

Attach click listeners to your anchors. Inside each of them find current selected div and div you want to be selected and call changeSelection() using these divs.

For scrollDown we want to select the next div:

$(document).on("click", "[href='#scrollDown']", function(){
    var currentSection = $(".selected");
    var nextSection = currentSection.next(".jumptosection");

    changeSelection(currentSection, nextSection);

    return false;
});

For scrollUp we want to select the previous div:

$(document).on("click", "[href='#scrollUp']", function(){
    var currentSection = $(".selected");
    var prevSection = currentSection.prev(".jumptosection");

    changeSelection(currentSection, prevSection);

    return false;
});

In case you reach the end (the first or the last .jumptosection div), nothing will be changed (it is controlled by the changeSelection function - it checks do we have sectionWeWantScrollTo)

Here is the Demo

---

Edited (for http://94co.com/client3/about/)

1. See this answer about WordPress and jQuery. Use jQuery instead of $ in your script
2. It is better to use id instead of href on anchor

3. Make sure you wrap JavaScript of click listeners in

   jQuery(document).ready(function(){
        /*scrollUp and scrollDown click listeners should be here*/
   });
   

   (JSFiddle makes this wrap automatically). changeSelection function doesn't need to be wrapped

Here is the updated Demo

Answer 2

You can set some initial var that let you know the start point like this:

var pre = $('.et-float-menu-item1'),
    nex = $('.et-float-menu-item2'),
    act = $('#section1');

_{Where act is the start}

And then evaluate prev and next elements:

nex.click(function(){
    pre.slideDown();
    var gt = act.next('div').offset().top;
    $('body').animate({scrollTop : gt},'slow');
    act = act.next('div');
})
pre.click(function(){
    var gt = act.prev('div').offset().top;
    $('body').animate({scrollTop : gt},'slow');
    act = act.prev('div');
})

This code can be improved but is the first aproach I can give.

Check the Demo Fiddle