Jump to content
Search Community

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

AND Factory test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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" ??

Link to comment
Share on other sites

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>
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...