Question

我有2列需要使用2个按钮独立滚动。我在https://stackoverflow.com/a/8329376/1628193找到了一个类似的问题，仅适用于1列。所以我的问题是如何让这个至少在2列上工作？

非常感谢！

更新

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");
}

Answer 1

您使用当前代码定位两个滚动DIV。它们具有相同的类名，因此您需要为它们提供不同的ID或使用CSS选择器来专门定位它们。这是一个执行此操作的版本：

<!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

Answer 2

我看到你有一个很好的答案，但这里有另一种选择： - ）

http://jsfiddle.net/christianalfoni/Lhyqascj/3/

我创建了一个带包装器的函数。这样，您可以根据需要多次添加此应用程序的不同部分，而不仅仅是这两个实例。

some code...

使用2个按钮向上和向下滚动多个div

2 个答案: