Mootools return to top of containing div?

Question

I use a mootools-based pagination which works fine. However, I would like after a user clicks to a new page (from the bottom where the pagination links are clicked) to return the new set of comments and scroll back up to the top of the container div.

Is there a function to do something like that with mootools?

Here is the code that needs to be changed:

var Comments = new Class({

id: 0,
page: 0,
object: null,
name: null,
parentid: 0,
folder: './',

initialize: function(id, object, name, folder){
    // Setup
    this.id = id;
    this.object = object;
    this.name = name;
    this.folder = folder;
    // Get the comments for this page
    this.getComments(this.page);
},


cacheDefeat: function() {
    var myDate = new Date();
    return '&r=' + myDate.getTime();
},


getComments: function(page) {
    this.page = page;
    var object = this.object;
    var req = new Request({
        method: 'get',
        url: this.folder + 'backend.php',
        onSuccess: function(text, xml) {
            object.set('html', text);
        }
    }).send('objid=' + this.name + '&do=read&thumbs=' + $(this.name + "sel").value + '&id=' + this.id + '&page=' + this.page + this.cacheDefeat());
},
});

I can't figure the correct way to add the scroll event to it.

Answer 1

What you need is Fx.Scroll , a Mootools More Extension.

You will probably wish to scroll the window which you can access with window . You want to scroll to the start of some child element of the window. Thankfully, Fx.Scroll has the toElement method which does this for us. So you can do the following:

var container = $('idOfDivWithPaginatedContents');

var scoller = new Fx.Scroll(window);

Make sure the above code is outside the function where you wish to scroll the page or else you will create loads of scrollers instead of just one. Then inside that function (make sure you pass in the scroller and container as a parameters):

var paginationFunction = function(scroller, container) {
    //Paginate stuff here

    scroller.toElement(container);
}