Use anchor with parallax scrolling - css

Question

I'm trying to create a vertical bullet navigator for a website with parallax scrolling. Unfortunately the redirect of the nav isn't working.
here's the jsfiddle: http://jsfiddle.net/r1yq7pLd/
Scrolling seems ok but the anchor doesn't work. Anyone knows the reason?
html:
<div id="wrapper">
<section id="main_bg" data-type="background" data-speed="10">
</section>
<section class="content" data-type="text">
<article>I am absolute positioned</article>
</section>
<nav>
<ul>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</nav>
</div>
css:
body{
background-color:#1599D0;
}
#wrapper{
width:100%;
height: 1000px;
}
nav{
top: 35%;
position: fixed;
right: 50px;
width: 30px;
border-left: double rgba(255,255,255,0.4);
border-right: double rgba(255,255,255,0.4);
}
ul li a{
color: rgba(255,255,255,0.4);
font-size: 30px;
text-decoration: none;
text-indent: -9999px;
padding: 0 10px;
}
#main_bg{
background: url("../img/wall_index1.jpg") repeat fixed;
/* Set rules to fill background */
min-height: 100%;
background-size:cover;
/* Set up proportionate scaling */
width: 100%;
/* Set up positioning */
position: relative;
}
.content{
position:relative;
width: 100%;
background-color:#000;
padding: 200px;
font-size: 50px;
color: #FFF;
height: 500px;
}
Note: the menu here is a bit messy due absence of reset.css. Is it possible to insert it in jsfiddle?

Answer 1

It's not to do with the CSS you're using, it's because you've not set your anchors properly. Pag2 and Top are should be set as ids, with the navigation using href to link back to them - you have both set as href. Also, you don't need to actually set separate anchors anymore, you can just use ids within your existing elements. Finally, exclude the hash from the id itself, that's just to tell the link to look for an anchor rather than a new page.
Your html should be:
<div id="wrapper">
<section id="main_bg" data-type="background" data-speed="10"></section>
<section class="content" data-type="text">
<article id="pag2">I am absolute positioned</article>
</section>
<nav>
<ul>
<li>Top</li>
<li>Page 2</li>
<li>...other links</li>
<li>...other links</li>
<li>...other links</li>
</ul>
</nav>
</div>
There's no need for separate top anchor, "#" will always go to the top of the current page.
Incidentally, I'm not sure why you've got bullets within your list - by default, an unordered list (<ul>) will put bullets in for you, so I've replaced your link text with something more meaningful.