Q: How to use localscroll after another event occurs on click? I am trying to make a horizontal scrolling layout and I need this layout to adjust its height depending on which page it's on. To do this I set each "page" div other than the one that is being viewed to display:none and on click all of the pages display:block and then the selected page stays display:block while the rest of the pages go back to display:none. 
I am trying to get a scrolling effect through the pages so that after they click and the pages are all display:block, it scrolls to the selected page and THEN sets the other pages as display:none.. but after setting the javascript for the pages, I cannot get the scrolling to work, it just goes directly to the page. 
Here is an example of what I am going for http://www.numidia.it/#/homepage 
this is my CSS for my pages / page holder (container)
.container {
    position: relative;
    width: 400%;
}

.page {
    position: absolute;
    width: 25%;

}

.page2,
.page3,
.page4 {
        display: none;
}    

.page1 {
    top: 0;
        left: 0;
}

.page2 {
    top: 0;
    left: 100%;
}

.page3 {
    top: 0;
    left: 200%;
}

.page4 {
    top: 0;
    left: 300%;
}

and here is my javascript: 
var $navLinks = $('nav ul li a');


$navLinks.on('click', function(){

    var $this = $(this);


    $('.page').css('display', 'block');
    $navLinks.localScroll({duration:5000, axis:'yx', queue:true });


        if($this.hasClass('page-link-1')){
        $('.page2').css('display', 'none');
        $('.page3').css('display', 'none');
        $('.page4').css('display', 'none');
    }else if($this.hasClass('page-link-2')){
        $('.page1').css('display', 'none');
        $('.page3').css('display', 'none');
        $('.page4').css('display', 'none'); 
    }else if($this.hasClass('page-link-3')){
        $('.page1').css('display', 'none'); 
        $('.page2').css('display', 'none');
        $('.page4').css('display', 'none');
    }else if($this.hasClass('page-link-4')){
        $('.page1').css('display', 'none');
        $('.page2').css('display', 'none');
        $('.page3').css('display', 'none'); 
    }

})

Any help at all is greatly appreciated!

A: You can try to use jQuery animate:
Html:
 <button onclick="nextPage('0%')">go to page 1</button>
 <button onclick="nextPage('25%')">go to page 2</button>
 <button onclick="nextPage('50%')">go to page 3</button>
 <button onclick="nextPage('75%')">go to page 4</button>

And javascript:
 function nextPage(data)
{
   $('.conainer').animate({'left':data}, 1000);
}

After you got this working you can try something with display none so you don't have to scroll past the rest of the pages.
