Floating content area of ​​the site.

Greetings Habr.
Based on the site, you yourself know who :)
At one time, I saw such an effect - on the left of the site there are links, when clicking on which, the content area of ​​the site smoothly moves to the specified identifier. I remember the effect - I decided to repeat it.
To implement a smooth movement took jQuery.



A bit of theory:
This effect is achieved by placing the “window” (if I honestly don’t know what it’s called in others - as suggested by j4ck - viewport ), over the content area that we will be positioning.
The “window” area can be made arbitrary.
Picture

Practice
Create a grid:

< div id ="small" >
< div id ="big" >

< div class ="workplace" id ="wp_01" >
< p > </ p >

</ div >
< div class ="workplace" id ="wp_02" >
< p > </ p >
</ div >
< div class ="workplace" id ="wp_03" >
< p > </ p >
</ div >
< div class ="workplace" id ="wp_04" >
< p > </ p >
</ div >

</ div >
< ul id ="links" " >
< li >< a href ="#" id ="go" onclick ="return moveTo('wp_01', 'big');" > 1 </ a ></ li >
< li >< a href ="#" id ="go2" onclick ="return moveTo('wp_02', 'big');" > 2 </ a ></ li >
< li >< a href ="#" id ="go3" onclick ="return moveTo('wp_03', 'big');" > 3 </ a ></ li >
< li >< a href ="#" id ="go4" onclick ="return moveTo('wp_04', 'big');" > 4 </ a ></ li >
</ ul >
</ div >

* This source code was highlighted with Source Code Highlighter .

We superimpose a style sheet for positioning:

< style >
html {
height: 100%;
}
body {
padding:0; margin:0;
height: 100%;
}
#big{
width: 30000px;
position: absolute;
top: -1000px;
left: -100px;
cursor: move;
}

#small {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background: url(img/bg.jpg);
}

#links {
top:10px;
left: 10px;
position: absolute;
width: 75px;
background-color: white;
padding: 5px;
opacity:0.5;
}

div.workplace {
width: 400px;
position: absolute;
cursor:default;
}

#wp_04 {
top:1800px;;
left: 1800px;
}

#wp_03 {
top:1000px;;
left: 1500px;
}

#wp_02 {
top: 200px;;
left: 400px;
}

#wp_01 {
top: 1650px;
left: 800px; }

div.workplace {
font: normal 90% "Trebuschet MS";
color:white;
}

a.act {
font-weight: bold;
text-decoration:none;
}

</ style >

* This source code was highlighted with Source Code Highlighter .

javascript

<script>jQuery.noConflict();</script> /* framework */
<script>
function moveTo(divId, mainId) {
jQuery( "#" +mainId).stop(); /* */
var topIn = jQuery( "#" +divId).css( "top" );
var leftIn = jQuery( "#" +divId).css( "left" );
leftIn = leftIn.replace(/px/, "" );
leftIn = leftIn - 400;
jQuery( "#" +mainId).animate({
top: "-" +topIn,
left: "-" +leftIn
}, 1500 );
return false ;
}
</script>

* This source code was highlighted with Source Code Highlighter .

')
Description
We transfer functions:
divId - identifier of the area to stand on
mainId - content id
With the help of animate, smoothly move the content area to the specified element.

Actually everything.
Example: http://htmllancer.tu2.ru/workarea.html

Article one - so don't kick your feet :)

UPD: redid the height of the screen.
UPD2: stopped the animation, now with 10 clicks the area does not go 10 times