Stopping Anchors from Scrolling to the Top!

I'm trying to build a website where all the 'pages' are in a single document. Each 'page' is an anchored section, so when I call it from the main navigation which is placed at the top of the site, the section slides into view. But I have two issues: 1) when I link from outside the site, I want to be able to link to any individual anchored section without having the page scroll up (because then you can't see the Navigation which is placed at the top) and 2) I'd like it so that if I refresh, the page doesn't start from the beginning. To get what I mean, here's a site that has exactly the same sliding-content-into-view layout that I have and illustrates exactly what I'd like to have in addition:

http://www.incub.ro/#page-news

Notice how not only the name of the anchor appears on the address bar but the page itself loads in full and doesn't scroll the anchored subject up to the top? Yeah, well that's what I'm trying to achieve!

My code looks something like this:

HTML CODE ------

<!-- Commence Navigation -->

<div class="wrapper">

<div id="headcontainer">
  <div id="banner">开发者_Python百科<a href="#home" class="panel"><img src="images/layout/0_homepage.png" id="top" height="100" width="420"border="0" /></a>

    <div id="navigation">
    <div class="center">
    <ul id="topnav">
        <li><a href="#link1" class="panel">Link 1</a></li> 
        <li><a href="#link2" class="panel">Link 2</a></li> 
        <li><a href="#link3" class="panel">Link 3</a></li> 
        <li><a href="#link4" class="panel">Link 4</a></li>
    </ul>
    </div>
    </div>
  </div>
</div>

<!-- End Navigation -->


<!-- Commence Content -->

<div id="wrapper">
<div id="mask">


    <div id="home" class="item">
    <a name="home"></a>
    <div id="container-slideshow"></div>
    </div>
    </div>

    <div id="link1" class="item">
    <a name="link1"></a>
    <div class="content">
    </div>
    </div>

    <div id="link2" class="item">
    <a name="link2"></a>
    <div class="content">
    </div>
    </div>

    <div id="link3" class="item">
    <a name="link3"></a>
    <div class="content">
    </div>
    </div>

    <div id="link4" class="item">
    <a name="about"></a>
    <div class="content">
    </div>
    </div>

   </div> 
   </div> 
   </div>
   <!-- End Content -->

   <div class="footer"> </div>

CSS CODE ------

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    background-color: #131419;
    background-attachment: fixed;
    background-image: url("../images/layout/background_lrg2.jpg");
    background-position: center top;
    width:100%;
    overflow:hidden;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

.wrapper {
    min-height: 100%;
    height: 70%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    overflow:hidden; 
  }

#wrapper {
    width:100%;
    height:100%;
    position:relative;
    top:0px;
    left:0;
    overflow:hidden;
}


#mask {
    width:900%;
    height:100%;
    overflow:hidden;
}

.item {
    width:11.1%;
    height:100%;
    float:left;
    margin-right: auto;
    margin-left: auto;
    position:relative;
    top:30px;
    overflow:hidden;
}

.content {
    font-family: Helvetica, Arial, sans-serif;
    color: #d1d1d1;
    font-size: 14px;
    line-height: 22px;
    width: 1000px;
    overflow:auto;
    padding-left: 30px;
    padding-right: 10px;
    padding-bottom: 10%;
    position:relative;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
}

I hope that makes sense. Thanks in advance!

---

Are you willing to use jQuery? If so, maybe this snippet can help:

$(function() {
    // assigns click action for the a's
    $('#topnav a').click(function(e) {
        // prevent default behavior so clicking the <a> won't go up
        e.preventDefault();
        // get the anchor in the <a> and change the window hash
        // e.g. http://site.com/#link4
        window.location.hash = $(this).attr('href');
    });
});

---

Okay, finally I managed to find a solution to the anchors scrolling upwards issue. Just changing the position of the #headcontainer to "fixed" and moving it at the bottom of the HTML page did the trick, along with adding "top:200px;" to my content class, so that we can see the navigation.

So with the help of tradyblix, this essentially solves my problems, although there is a weird sort of "flicker" that happens to the content when I click on a link on the nav. I don't really know how to explain it. It wasn't there before though so it has to do with the new code...