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: ```

Section 1

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.

Curabitur arcu tortor, tincidunt in ante ornare, aliqu…

Accepted Answer

Change `href`s 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 `anchor`s. Inside each of them find current selected `div` and `div` you want to be selected and call `changeSelection()` using these `div`s.

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

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

Solution

Problem

Related problems