Jump to content
Search Community

scrollTo plugin

Guest zachledoux
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

Guest zachledoux

I am trying to setup a menu which uses the scrollTo plugin to move to different sections of a one page site, with a menu bar at each section.

 

The html looks like this:

 

<div id="bg">

<div id="section1">

<div id="menubar">

 

<div id="logo">

</div>

 

<div id="vertline">

</div>

 

<button id="whoweare">WHO WE ARE</button>

 

<button id="whatwedo">WHAT WE DO</button>

 

...

 

 

<div id="section2">

<div id="menubar2">

 

<div id="logo">

</div>

 

<div id="vertline">

</div>

 

<button id="whoweare">WHO WE ARE</button>

 

<button id="whatwedo">WHAT WE DO</button>

 

.......

 

The style like this:

 

 

#bg{

height:8000px;

background:url(images/background.png);

margin: auto;

}

 

#section1 {

height: 800px;

}

 

#section2 {

height: 800px;

}

 

#menubar {

position: relative;

height: 50px;

border-bottom: 1px solid;

border-color: #022e2f;

}

 

#menubar2 {

position: relative;

height: 50px;

border-bottom: 1px solid;

border-color: #022e2f;

}

 

#logo {

width: 76px;

height: 34px;

margin-left: 25px;

margin-right: 25px;

background-image:url(images/logo.png);

background-repeat: no-repeat;

}

 

#vertline {

width: 1px;

height: 200px;

position:absolute;

top: 0px;

left: 120px;

background-color: #022e2f;

}

 

#whoweare {

position:absolute;

top: 10px;

left: 145px;

color: #fff;

font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;

font-weight:600;

font-stretch:normal;

font-size: 14px;

background-color: transparent;

}

 

#whatwedo {

position:absolute;

top: 10px;

left: 280px;

color: #fff;

font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;

font-weight:600;

font-stretch:normal;

font-size: 14px;

background-color: transparent;

}#bg{

height:8000px;

background:url(images/background.png);

margin: auto;

}

 

The script looks like this:

 

<script>

$(document).ready(function(){

TweenMax.set(window, {scrollTo:0});

 

$("button#whoweare").click(function()

{

var section1 = $("div#section1").offset().top;

TweenLite.to(window, 1.5, {scrollTo:section1, ease:Back.easeOut});

});

 

$("button#whatwedo").click(function()

{

var section2 = $("div#section2").offset().top;

TweenLite.to(window, 1.5, {scrollTo:section2, ease:Back.easeOut});

});

});

</script>

 

....

 

On the first menu the "whatwedo" button works, and will scroll to the second menu. But the second menu doesn't work. Is there something I'm missing?

 

Thanks!

Zach

Link to comment
Share on other sites

Its very difficult to ascertain just looking at lots of code. 1 thing that jumped out is that you are using the same ID on multiple elements. ID's are supposed to be unique.

 

you have 2 instance of both of these buttons

<button id="whoweare">WHO WE ARE</button>

<button id="whatwedo">WHAT WE DO</button>

 

Try fixing that and see if it works.

 

You could do something as basic as making whatwedo a class and giving the button a unique id

 

<button class="whatwedo" id="whatWeDo1">WHAT WE DO</button>

 

Be sure to change your css from

#whatwedo to .whatwedo

 

If that doesn't help, you can zip up your html/css/js and attach it to this thread.

Link to comment
Share on other sites

Guest zachledoux

Got it. It was a z-index thing. The second menu was being covered by a transparent div that was animating over it, rendering the menu unclickable.

 

Thanks for your help!

Zach

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...