0

I have a list of child divs in a parent div overflow hidden. There is more child divs that can display the parent, so the other ones are hidden. I'd like to have buton to make the list scroll down to see the overflowed hidden divs. How could I do that?

What I've already done:

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

demo: http://jsfiddle.net/qx7zK/1/

Thanks

4

1 回答 1

0

You do not have to animate the bottom property but the scrollTop property:

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

    e.preventDefault();
    $('.cat_enveloppe').animate({
        scrollTop: $('.cat_enveloppe').scrollTop() + 100 // scroll up 100 pixels
    }, 5000);
});
于 2013-08-20T22:15:51.070 回答