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;
});
});

you have the href set as #scroll there is no element with scroll set as id, also you cannot have more than one element have the same id if that was a typo — Patrick Evans, Jan 29 '14 at 19:28

score 6 · Accepted Answer · edited May 23 '17 at 11:56

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/)

See this answer about WordPress and jQuery. Use jQuery instead of $ in your script
It is better to use id instead of href on anchor
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

Demo works perfectly...thank you again. If you have a second could you look at it here: http://94co.com/client3/about/ Doesn't seem to be working for some reason but its all in the source. — David Coggins, Jan 29 '14 at 20:25
Wrap listeners in `$(document).ready(function(){/*listeners are here*/});` — n1k1ch, Jan 29 '14 at 20:28
Also, use `jQuery` instead of `$` (details [here](http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct)) — n1k1ch, Jan 29 '14 at 20:30

score 1 · Answer 2 · answered Jan 29 '14 at 19:42

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

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

2 Answers2

Here is the Demo

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

Here is the updated Demo