Question

i have a HTML page with a centered div of 780px width and 8400px height. There is a background image set on this div. Now i have a scrollbar to scroll down vertically, that’s good. I want to keep it that way. But i also have two buttons (previous and next). When i click next i want my container to scroll down 1200px, when i press previous i want my container to scroll up 1200px. But then my scrollbar shrinks. and i also can keep pressing the next prev button, also if the image isn’t available anymore…

this is my code JQUERY:

$(document).ready(function (e) {
    $(".scrolling_prev").click(function () {
        $(".scrolling").animate({ "top": "+=1200px" }, 800);
    });
    $(".scrolling_next").click(function () {
        $(".scrolling").animate({ top: "-=1200px" }, 800);
    });
});

this is my markup:

    <div class="centerSite">
        <div class="siteContainer">
            <nav></nav>
            <div class="content">
                <div class="scrolling"></div>
                <div class="scrolling_prev"></div>
                <div class="scrolling_next"></div>
            </div>
            <footer></footer>
        </div>
    </div>

anyone can help?

Answer 1

You are looking at the wrong property, top will just move your image and not scroll it, if you want to scroll it, use scrollTop

http://jsfiddle.net/dxMTX/11/

$('#prev').click(function() {
    $('#outer').animate({'scrollTop':'-=1200'});
});
$('#next').click(function() {
    $('#outer').animate({'scrollTop':'+=1200'});
});