Smooth Scroll

ContentPane + smoothScroll example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<div>
    <button type="button" dojoType="dijit.form.Button" onClick="scrollToFirst();">Scroll to first</button>
    <button type="button" dojoType="dijit.form.Button" onClick="scrollToLast();">Scroll to last</button>
</div>
<div dojoType="dijit.layout.ContentPane" id="spam">
<p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p><p>some content</p>
</div>

CSS

#spam {
    height: 200px;
    border: 1px solid #ccc;
}

JavaScript

dojo.require('dojox.fx.scroll');
dojo.require('dijit.form.Button');
dojo.require('dijit.layout.ContentPane');

dojo.ready(function() {
    var html = '<p>some content</p>';
    for (i = 50; i--;) {
        html += '<p>more content</p>';
    }
    html += '<p>last content</p>';
    dojo.place(html, 'spam');
});

function scrollToFirst() {
    dojox.fx.smoothScroll({
        node: dojo.query('#spam :first-child')[0],
        win: dojo.byId('spam')
    }).play();
    
}

function scrollToLast() {
    dojox.fx.smoothScroll({
        node: dojo.query('#spam :last-child')[0],
        win: dojo.byId('spam')
    }).play();
}