Question

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"><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!

Answer 1

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');
    });
});