How do I achieve this technique in web design

[realizedvisions]

Hello, I was curious about how to go about achieving the scolling manner of the following sites. My explanation is horrible at best. I am trying to say I wish to have the links clickable and going to fixed anchors. Again, it's hard to explain what I wish to convey. I'll provide the links to two different sites that achieve that which I wish to emulate.

http://metropolis1927.com
http://www.microsoft.com/office/labs/index.html


I am not the most knowledgable on current trends in web design. I've been out of the circuit since 2004 and though my Photoshop skills are great my web design skillsets need considerable development to attain contemporary relevance.


Any links to tutorials or thoughts are greatly appreciated.Thanks for any help.

 

[randled]

Ref: http://metropolis1927.com/

I think that's a pretty simple technique. Each section is a div. If you look at the source you can see these. The nav panel on the left is another div that is fixed. I know that all of the divs going down the page are simply lined up. Furthermore, you just add a background image in each div as a sort of identifier that you're on to a new section.

Edit: Here is the CSS about the nav on the left, it looks like the position is fixed:

#nav {
z-index: 1;
position: fixed;
top: 12px;
left: 0px;
display: block;
height: 95%;
width: 200px;
/* text-align: right;*/
list-style-type: none;
}

 

[Phreaddee]

randled is right, it is a pretty simple concept to implement.
however the class "current" is added to the links (to give the stepping effect as you scroll down) via javascript.
its in the source code. check it out.

 

[randled]

randled is right, it is a pretty simple concept to implement.
however the class "current" is added to the links (to give the stepping effect as you scroll down) via javascript.
its in the source code. check it out.

I didn't even realize that. Good observation. Is this the section of the Javascript that makes the sliding effect happen?

var pages = [];

				$('div.page').each (function (index) {
					pages [index] = {
						id:  $(this).attr ('id'),
						x:  ($(this).offset ()).top,
						h:   $(this).height () };
				});

				var cur_page = 'home';

				$(window).scroll (function (event_obj) {
					var x_w = $(window).scrollTop ();
					var h_w = $(window).height ();

					var cutoff_top    = x_w +     h_w / 3;
					var cutoff_bottom = x_w + 2 * h_w / 3;

					var next_page = cur_page;

					for (var i = 0; i < pages.length; ++i) {
						if (pages [i].x <= cutoff_top && (pages [i].x + pages [i].h) >= cutoff_bottom) {
							next_page = pages [i].id;

							break;
						}
					}

					if (next_page != cur_page) {
						$('a#' + next_page + '_nav_link').addClass ('current');
						$('a#' + cur_page  + '_nav_link').removeClass ('current');
					}

					cur_page = next_page;
				});