How to setup the menu to auto scroll to section and addClass=("active")? [SOLVED]

[AND Factory]

Hello again,

 

I'm now moving on to the menu. How do I setup the menu (styled it etc..), so what I want is that once you click on a menubutton it auto scrolls down to that page/section. And my question is. How do I do that?

 

Because when I look at the demo of this I don't see any demo with an actual functioning menu. There is a lot about effects and animations, but nothing in it about how to make all of that work with a navigation also.

 

Does anyone got some kind of tutorial on 'How to make a menu that scroll to page/section'? Maybe there is a tutorial somewhere that I have missed?

[AND Factory]

Nevermind my first question I was blind, but found my answer in:

http://forums.greensock.com/topic/6056-scrolling-the-page-up-and-down-with-greensock-js/

 

I now got another question to this. How do I add the class="active" once a men-button has been clicked?

 

I used to use this function on my past page, but not entirely sure how to work in this to what I just added.

 

Old js (add/remove class="active"):

$('ul#menu li a').click(function() {
	var lsdata = $('#layerslider').layerSlider('data');
		if(lsdata.isAnimating == false){
			$('ul#menu li a').each(function() {
			$(this).removeClass('active');
		});
		$(this).addClass('active');
		$('#layerslider').layerSlider($('ul#menu li a').index(this)+1);
	}
});

This is the new coding I have added to make the menu auto scroll down to a section:
 

<script language="JavaScript" type="text/javascript">
            $(function() {
                $("#click_home").bind('click', { id: '#home' }, scroller);
                $("#click_aboutme").bind('click', { id: '#about_me' }, scroller);
                $("#click_process").bind('click', { id: '#process' }, scroller);
                $("#click_cases").bind('click', { id: '#cases' }, scroller);
                $("#click_contact").bind('click', { id: '#contact' }, scroller);
                
                function scroller(event){
                    var scrollYPos = $(event.data.id).offset().top;
                    event.preventDefault();
                    TweenLite.to(window, 2, {scrollTo:{y:scrollYPos, x:0}, ease:Power4.easeOut})
                }  
            });
</script>

Any suggestions on how to do the Add/Remove class="active" ??

[AND Factory]

Figured out how to add class="active" to the scroll script. This is the solution I ended up with:

 

<script language="JavaScript" type="text/javascript">
            $(function() {
                $("#click_home").bind('click', { id: '#home' }, scroller);
                $("#click_aboutme").bind('click', { id: '#about_me' }, scroller);
                $("#click_process").bind('click', { id: '#process' }, scroller);
                $("#click_cases").bind('click', { id: '#cases' }, scroller);
                $("#click_contact").bind('click', { id: '#contact' }, scroller);
                
                function scroller(event){
                    var scrollYPos = $(event.data.id).offset().top;
                    event.preventDefault();
                    TweenLite.to(window, 2, {scrollTo:{y:scrollYPos, x:0}, ease:Power4.easeOut})
                }
            });
            $("ul#menu li a").click(function() {
                $("ul#menu li a").removeClass("active");
                $(this).toggleClass("active");
            });
        </script>