Scroll to a location on a page - html

Question

I'm trying to move to a specific location on the page after a link is clicked.
Here's my website:
http://violetoeuvre.com/
I want the page to jump to the writing section when the top writing link is clicked, and same thing for contact, similar to this:
http://jsfiddle.net/4ygcf/
But, when I sub in the appropriate ids, it's not working. Here's my html:
<div class="wrapper_nav_box">
<div id="nav_menu" id="nav_box_1">WRITING |</div>
and css:
.side_nav_contact {
display:block;
float:left;
background:rgba(100,255,255,0);
margin-top: 840px;
width:200px;
height: 50px;
}
#nav_box_l {
display: block;
float:left;
width:247px;
text-align: right;
padding-top: 169px;
margin-top: 0;
}
#nav_menu a:link{
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
#nav_menu a:hover{
font-family: 'Playfair Display', sans-serif;
font-size: 30px;
font-style: italic;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
I suspect that this is because I'm using two ids (#nav_box_l and #nav_menu). #nav_menu is how I'm styling the links, while #nav_box_l contains "Writing." I tried combining but this doesn't work. Should I just use one? Does this technique not work if I want to jump to a class (.side_nav_content), not id?
Thanks.

Answer 1

"Writing" link:
home_writing is currently a class, change that to an id <div id="home_writing"> and it will work
"About" link:
You have set the link to <a href="home_text"... rather than <a href="#home_text", stick the # in and that should work too
"Contact" link:
You don't have a div called #contact, which is what you are linking to, change the <div class="home_contact"> to <div id="contact"> and that one should work too

Answer 2

An HTML element may only have one id and only one element may have that id. You can use a classfor the styling.
.nav_box_l {
display: block;
float:left;
width:247px;
text-align: right;
padding-top: 169px;
margin-top: 0;
}
<div id="nav_menu" class="nav_box_1">...</div>