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