How to get a button move to a view in scrollableView

Hi there. I got a scrollableView with some views. In view1 is a gridlayout with buttons. I want them (onclick) to move to a specific view. So button 1 go to view1, button 2 go to view2, etc.

Here is my code: app.js

var window = Ti.UI.createWindow({
    backgroundColor: '#eee'
});
 
var btnWidth = 130;
var btnHeight = btnWidth;
var screenWidth = btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth));
 
 
/*view1*/
var view1 = Ti.UI.createScrollView({ 
    backgroundColor:'#eee',
    width: 'auto',
    height: 'auto'
});
 
var view1cont = Ti.UI.createView({
    backgroundColor: '#eee',
    layout: 'horizontal',
    width: screenWidth,
    height: 'auto',
    top: (btnWidth / 6)
});
 
view1.add(view1cont);
 
Titanium.Gesture.addEventListener('orientationchange', function(e){
    view1cont.setWidth(btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth)));
});
/*end view1*/
 
 
/*view2*/
var view2 = Ti.UI.createScrollView({ 
    backgroundColor:'#751',
    layout: 'horizontal',
    width: screenWidth
});
/*end view2*/
 
 
/*view2*/
var view3 = Ti.UI.createScrollView({ 
    backgroundColor:'#964',
    layout: 'horizontal',
    width: screenWidth
});
/*end view3*/
 
 
/*scrollableView*/
var view = Ti.UI.createScrollableView({
    views:[view1,view2,view3],
    showPagingControl:true,
    width: '100%',
    height: '100%'
});
/*end scrollableView*/
 
 
/*buttons*/
function makeBtn(btnname){
    return Titanium.UI.createButton({
        width: btnWidth,
        height: btnHeight,
        title: btnname
    });
}
 
view1cont.add(makeBtn(L('string1')));
view1cont.add(makeBtn(L('string2')));
view1cont.add(makeBtn(L('string3')));
view1cont.add(makeBtn(L('string4')));
view1cont.add(makeBtn(L('string5')));
view1cont.add(makeBtn(L('string6')));
view1cont.add(makeBtn(L('string7')));
view1cont.add(makeBtn(L('string8')));
view1cont.add(makeBtn(L('string9')));
view1cont.add(makeBtn(L('string10')));
view1cont.add(makeBtn(L('string11')));
view1cont.add(makeBtn(L('string12')));
view1cont.add(makeBtn(L('string13')));
view1cont.add(makeBtn(L('string14')));
view1cont.add(makeBtn(L('string15')));
view1cont.add(makeBtn(L('string16')));
view1cont.add(makeBtn(L('string17')));
view1cont.add(makeBtn(L('string18')));
view1cont.add(makeBtn(L('string19')));
view1cont.add(makeBtn(L('string20')));
/*end buttons*/
 
window.add(view);
window.open();

The best would be if I could make something like this:

function makeBtn(btnname, gotoview){
    return Titanium.UI.createButton({
        width: btnWidth,
        height: btnHeight,
        title: btnname,
        scrollToView: gotoview
    });
}
 
view1cont.add(makeBtn(L('string1')), view1);
view1cont.add(makeBtn(L('string2')), view2);

But that doesn't work, I know. But how can I make it work?

Thanks people! And you're all free to use and tweak the code for free if you want a gridlayout like this. (I'm trying to make something like dashboard, still a lot to do)

You can use the scrollToView method of the ScrollableView. You can pass it either an index of the view to scroll to, or you can pass in the view object that you'd like to scroll to.