Question

我有一个隐藏父div溢出的子div列表。有更多的子div可以显示父级，所以其他的是隐藏的。我想要让列表向下滚动以查看溢出的隐藏div。我怎么能这样做？

我已经做过的事情：

HTML：

<div id="nav4">
<p class="titre_nav">Categories</p>
<div id="haut_categorie"></div>
    <div class="cat_enveloppe">
        <div class="lescat">
            <div class="cattitre"><a href="/cat/4orze-16.html" class="jaimelien">4orze<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/cat-1.html" class="jaimelien">cat<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">1</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/cateeegorie--8.html" class="jaimelien">catééégorie!<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/categoriiii-s-4.html" class="jaimelien">catégoriiii's<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/deonze-14.html" class="jaimelien">deonze<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/et-de-dix-13.html" class="jaimelien">et de dix<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/et-encore-une-de-pus-10.html" class="jaimelien">et encore une de pus<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/etoui16-18.html" class="jaimelien">etoui16<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/etoui17-19.html" class="jaimelien">etoui17<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/etune-de-plus--9.html" class="jaimelien">etune de plus!<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/latreize-15.html" class="jaimelien">latreize<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/neuf-cat-12.html" class="jaimelien">neuf cat<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/oneone--7.html" class="jaimelien">oneone!<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/quinze-17.html" class="jaimelien">quinze<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/totocat-2.html" class="jaimelien">totocat<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
<div class="lescat"><div class="cattitre"><a href="/cat/toujours-une-11.html" class="jaimelien">toujours une<span></span></a></div><div class="catnbre"><div class="cat_nbre_cadr">0</div></div></div>
</div>
<div id="bas_categorie"></div>
</div>

jquery：

$("#bas_categorie").click(function (e) {

        e.preventDefault();
        $('.cat_enveloppe').animate({
            bottom: '360px'
            }, 5000);
    });

演示：http://jsfiddle.net/qx7zK/1/

由于

Answer 1

您不必为bottom属性设置动画，而是使用scrollTop属性：

$("#bas_categorie").click(function (e) {

    e.preventDefault();
    $('.cat_enveloppe').animate({
        scrollTop: $('.cat_enveloppe').scrollTop() + 100 // scroll up 100 pixels
    }, 5000);
});

jquery：在溢出的div中滚动div列表

1 个答案: