Question

I have this code

    <div style="width: 400px; height:200px; background-color: #090; overflow-y: scroll">
        <p>first</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>aaaaaaaaaa</p>
        <p>last</p>
    </div>

I need at onclick some element, scroll bottom (maximal bottom) automatically, that is at onclick some element, need this result: please see screenshot

tell please how can make this?

Answer 1

Use <p id="last">last</p> and <a href="#last">Go to #last</a>:

<div style="width: 400px; height:200px; background-color: #090; overflow-y: scroll">
    <p>first - <a href="#last">Go to #last</a></p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p>aaaaaaaaaa</p>
    <p id="last">last</p>
</div>

​http://jsfiddle.net/bzuPy/