Hello erneholm,
I think this might be a little more js than I'm prepared to dig into today. Look at an idea I had for the markup though, using ap so you can place those outer grid elements off the screen -
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.3.1.js"></script>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
}
#tl, #tm, #tr,
#ml, #home, #mr,
#bl, #bm, #br {
height: 100%;
width: 100%;
position: absolute;
}
#tl {top: -100%;left: -100%;}
#tm {top: -100%;left: 0;}
#tr {top: -100%;right: -100%;}
#ml {top: 0;left: -100%;}
#home {top: 0;left: 0;}
#mr {top: 0;right: -100%;}
#bl {bottom: -100%;left: -100%;}
#bm {bottom: -100%;left: 0;}
#br {bottom: -100%;right: -100%;}
</style>
</head>
<body>
<div id="tl">Top Left</div>
<div id="tm">Top Middle</div>
<div id="tr">Top Right</div>
<div id="ml">Middle Left</div>
<div id="home">
<ul id="nav">
<li><a href="#tl">Top Left</a></li>
<li><a href="#tm">Top Middle</a></li>
<li><a href="#tr">Top Right</a></li>
<li><a href="#ml">Middle Left</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#mr">Middle Right</a></li>
<li><a href="#bl">Bottom Left</a></li>
<li><a href="#bm">Bottom Middle</a></li>
<li><a href="#br">Bottom Right</a></li>
</ul>
<!--end home--></div>
<div id="mr">Middle Right</div>
<div id="bl">Bottom Left</div>
<div id="bm">Bottom Middle</div>
<div id="br">Bottom Right</div>
</body>
</html>
That jQuery ScrollTo can be found
here. I'm not sure yet that's the right one for this.