asdf asdf - 1 month ago 8
CSS Question

Is it possible to have Previous/Next scroll with the Previous or Next div?

Is it possible to have Previous/Next to scroll vertically with the Previous or Next div?

If so, how is it achieved?

<!-- PREVIOUS / NEXT -->
<span class="go-prev">Previous</span>
<span class="go-next">Next</span>

<!-- CONTAINER -->
<div id="container">

<!-- SECTION 1 -->
<div class="section current" id="section-1">Section1</div>
<!-- SECTION 2 -->
<div class="section" id="section-2">Section2</div>
<!-- SECTION 3 -->
<div class="section" id="section-3">Section3</div>
<!-- SECTION 4 -->
<div class="section" id="section-4">Section4</div>
<!-- SECTION 5 -->
<div class="section" id="section-5">Section5</div>

</div>

Answer

You can accomplish this by showing and hiding the divs programatically. Check out this fiddle for a working solution (tested in chrome):

http://jsfiddle.net/bHS93/1/

You are simply applying css styles to the proper div and maintaining the last known state. You can spruce this up by adding transitions with a library like jQuery. Remember to updat eth

<!-- PREVIOUS / NEXT -->
<span id="go-prev">Previous</span> 
<span id="go-next">Next</span>

<!-- CONTAINER -->
<div id="container">
    <!-- SECTION 1 -->
    <div class="section current" id="section-1">Section1</div>
    <!-- SECTION 2 -->
    <div class="section" id="section-2">Section2</div>
    <!-- SECTION 3 -->
    <div class="section" id="section-3">Section3</div>
    <!-- SECTION 4 -->
    <div class="section" id="section-4">Section4</div>
    <!-- SECTION 5 -->
    <div class="section" id="section-5">Section5</div>
</div>

the CSS

.section {
    display: none;
}
.current {
    display: block;
}

and the JS

var prev = document.getElementById('go-prev'),
    next = document.getElementById('go-next'),
    pagination = (function () {
        var pages = [1, 2, 3, 4, 5], //the number of 'pages'
            current = 0;

        page = function (forward) {
            //reset visible div
            document.getElementById('section-' + (current + 1)).className = 'section';

            //traverse to the next one if we're not already at the beginning or end
            if (forward) {
                if (current < pages.length - 1) {
                    current++;
                }
            } else {
                if (current > 0) {
                    current--;
                }
            }

            document.getElementById('section-' + (current + 1)).className = 'section current';
        };
        return page;
    })();

prev.onclick = function () {
    pagination(false);
};
next.onclick = function () {
    pagination(true);
};