Search code examples
jquerycssscrollscrollable

Scroll multiple divs up and down with 2 buttons

I have 2 columns that need to be scrollable independently using 2 buttons. I found a similar question here https://stackoverflow.com/a/8329376/1628193 that works for 1 column only. So my question is how can I get this to work on at least 2 columns?

Many thanks!

See my demo

UPDATED

HTML

<div class="container">
    <div class="content">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>

<a href="#" id="up">Up</a>
<a href="#" id="down">down</a>

<div class="container2">
    <div class="content2">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>

<a href="#" id="up2">Up</a>
<a href="#" id="down2">down</a>

JAVASCRIPT

    $(document).ready(function() {

    if ($('.content, .content2').height() > $('.container, .container2').height()) {
        $("#down, #down2").hover(function () {
            animateContent("down");
        }, function() { $('.content, .content2').stop(); });

        $("#up, #up2").hover(function () {
            animateContent("up");
        }, function() { $('.content, .content2').stop(); });
    }
});

function animateContent(direction) {  
    var animationOffset = $('.container, .container2').height() - $('.content, .content2').height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    $('.content, .content2').animate({ "marginTop": animationOffset + "px" }, "fast");
}
Solution

  • You're targeting both of your scrollabe DIVs with your current code. They have the same class name so you'll either need to give them different IDs or use CSS selectors to specifically target one. Here's a version that does this:

    <!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div class="container1 container">
    <div class="content1">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>

<a href="#" id="upOne">Up</a>
<a href="#" id="downOne">down</a>

<div class="container2 container">
    <div class="content2">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>

<a href="#" id="upTwo">Up</a>
<a href="#" id="downTwo">down</a>

</body>
</html>

    JS:

    $(document).ready(function() {

    if ($('.content1').height() > $('.container:first-child').height()) {
        $("#downOne").hover(function () {
            animateContent("down", 1);
        }, function() { $('.content:first-child').stop(); });

        $("#upOne").hover(function () {
            animateContent("up", 1);
        }, function() { $('.content:first-child').stop(); });
    }

    if ($('.content2').height() > $('.container:last-child').height()) {
        $("#downTwo").hover(function () {
            animateContent("down", 2);
        }, function() { $('.content:last-child').stop(); });

        $("#upTwo").hover(function () {
            animateContent("up", 2);
        }, function() { $('.content:last-child').stop(); });
    }

});

function animateContent(direction, index) {  
    var animationOffset = $('.container' + index).height() - $('.content' + index).height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    $('.content' + index).animate({ "marginTop": animationOffset + "px" }, "fast");
}

    Updated JSBin