jQuery ScrollTo mutliple div using next/previous buttons

Question

HTML structure

<div class="main">
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="nav">
        <a href="#" class="next"></a>
        <a href="#" class="prev"></a>
    </div>
</div>

I want the next and previous button to scroll through the boxes when click.

Found this on fiddle -> http://jsfiddle.net/FWXc5/

but I need to have next & prev buttons only instead of corresponding items/buttons for each box.

Any help would be greatly appreciated,

Cheers

Answer 1

By using jQuery next() and prev() methods you can achieve this.

Try with the below code

HTML

<div id="home-block">
    <div class="current">Content Goes here</div>
    <div>A box of content</div>
    <div>Content</div>
    <div>More content...</div>
</div>

<div id="nav-right">
    <input type="button" value="Prev" id="prev" />
    <input type="button" value="Next" id="Next" />
</div>

CSS

#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}

.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}

#nav-right{
    position: fixed;
    right: 15px;
    top: 35%;
}

.current {
    color: red;
}

jQuery Code

 $('#nav-right input[type=button]').click(function(e) {
        if($(this).attr('id') == 'prev') {
            $(".current").prev().addClass("current");
            $(".current").eq(1).removeClass("current");
            $('html, body').animate({
                scrollTop: $(".current").offset().top
            }, 250);
        }else if($(this).attr('id') == 'Next') {
            $(".current").next().addClass("current");
            $(".current").eq(0).removeClass("current");
            $('html, body').animate({
                scrollTop: $(".current").offset().top
            }, 250);
        }
    });

Demo: http://jsfiddle.net/31bb118w/

Answer 2

You can use the nextSibling and previousSibling properties.