使用javascript从div中选中复选框时自动滚动

Question

i have two division tag one for maintain overflow content and another contain the check box when i click any check box i just need to scroll bar depending up on the check box ie there is 20 check box, 9-10 are visible, if you want other then you have to scroll scroll bar, but i want functionality like when i click on 9 check box and the user want to go forward then 10 check box come up automatic. this functionality already provided in hot mail for selecting the mail.

for that one i have use following

<div>
<div id="text" style="width: 500px; height:200px; border: solid 1px grey; overflow: scroll;">
    <input id="check1" type="checkbox" onclick="update(this.id)">Auto-scroll1<br>
    <input id="check2" type="checkbox" onclick="update(this.id)">Auto-scroll2<br>
    <input id="check3" type="checkbox" onclick="update(this.id)">Auto-scroll3<br>
    <input id="check4" type="checkbox" onclick="update(this.id)">Auto-scroll4<br>
    <input id="check5" type="checkbox" onclick="update(this.id)">Auto-scroll5<br>
    <input id="check6" type="checkbox" onclick="update(this.id)">Auto-scroll6<br>
    <input id="check7" type="checkbox" onclick="update(this.id)">Auto-scroll7<br>
    <input id="check8" type="checkbox" onclick="update(this.id)">Auto-scroll8<br>
    <input id="check9" type="checkbox" onclick="update(this.id)">Auto-scroll9<br>
    <input id="check10" type="checkbox" onclick="update(this.id)">Auto-scroll10<br>
    <input id="check11" type="checkbox" onclick="update(this.id)">Auto-scroll11<br>
    <input id="check12" type="checkbox" onclick="update(this.id)">Auto-scroll12<br>
    <input id="check13" type="checkbox" onclick="update(this.id)">Auto-scroll13<br>
    <input id="check14" type="checkbox" onclick="update(this.id)">Auto-scroll14<br>
    <input id="check15" type="checkbox" onclick="update(this.id)">Auto-scroll15<br>
    <input id="check16" type="checkbox" onclick="update(this.id)">Auto-scroll16<br>
    <input id="check17" type="checkbox" onclick="update(this.id)">Auto-scroll17<br>
    <input id="check18" type="checkbox" onclick="update(this.id)">Auto-scroll18<br>
    <input id="check19" type="checkbox" onclick="update(this.id)">Auto-scroll19<br>
    <input id="check20" type="checkbox" onclick="update(this.id)">Auto-scroll20<br>
    <script type="text/javascript">
        function update(checkID) {
            var box = document.getElementById("checkID");
            var tag = document.getElementById("text");
            tag.scrollTop = tag.scrollTop - 17;
            setTimeout('update(checkID)', 1000);
        }
    </script>
</div>
</div>

how to scroll scroll bar when user select check box from the list and also if user selecting forward than scroll down or user select backward than scroll up as per the user requirement

please help me thanks in advance ...

Answer 1

I think i did what you want. You will need jQuery for this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="text" style="width:500px;height:200px;border:solid 1px grey;overflow:scroll;">
    <input type="checkbox" />Auto-scroll1<br/>
    <input type="checkbox" />Auto-scroll2<br/>
    <input type="checkbox" />Auto-scroll3<br/>
    <input type="checkbox" />Auto-scroll4<br/>
    <input type="checkbox" />Auto-scroll5<br/>
    <input type="checkbox" />Auto-scroll6<br/>
    <input type="checkbox" />Auto-scroll7<br/>
    <input type="checkbox" />Auto-scroll8<br/>
    <input type="checkbox" />Auto-scroll9<br/>
    <input type="checkbox" />Auto-scroll10<br/>
    <input type="checkbox" />Auto-scroll11<br/>
    <input type="checkbox" />Auto-scroll12<br/>
    <input type="checkbox" />Auto-scroll13<br/>
    <input type="checkbox" />Auto-scroll14<br/>
    <input type="checkbox" />Auto-scroll15<br/>
    <input type="checkbox" />Auto-scroll16<br/>
    <input type="checkbox" />Auto-scroll17<br/>
    <input type="checkbox" />Auto-scroll18<br/>
    <input type="checkbox" />Auto-scroll19<br/>
    <input type="checkbox" />Auto-scroll20<br/>
</div>

<script type="text/javascript">
$(function() {
    var ct = $('#text'),
        cboxes = $('input[type="checkbox"]', ct),
        lastChecked = null;

    cboxes.click(function() {
        if (!lastChecked)
            lastChecked = this;

        var _current = $(this),
            _last = $(lastChecked),
            cindex = cboxes.index(_current),
            lindex = cboxes.index(_last),
            t = null;

        //next
        if (cindex >= lindex) {
            t = $(cboxes[cindex + 1]);
            if (t) ct.animate({ scrollTop: ct.scrollTop() + t.height() * 1.5 }, 500);

        //prev
        } else if (cindex < lindex) {
            t = $(cboxes[cindex - 1]);
            if (t) ct.animate({ scrollTop: ct.scrollTop() - t.height() * 1.5 }, 500);
        }

        lastChecked = this;
    });
});
</script>

see this