jquery - 使用 2 个按钮上下滚动多个 div

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

最佳答案

您正在使用当前代码定位两个滚动条 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

关于jquery - 使用 2 个按钮上下滚动多个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25183397/

jquery - 使用 2 个按钮上下滚动多个 div

上一篇：html - 下拉菜单不显示

下一篇：jquery - 如何用另一个div覆盖一个div