How to do this form of site scrolling?

[Goalie35]

Hello.
If you go to this page:
http://www.orangesoda.com/blend/features/#Overview

...and then click a link on the left side, it vertically scrolls you down the page to your selected section. I'm interested in knowing how this is done, but I don't even know what term to google by. Does anyone know the name of this scrolling technique & possibly a good tutorial?

Thanks

[TheGAME1264]

What you're looking for is called "parallax". I don't know of a good tutorial to build something like this and I wouldn't go that route if I were you, since a single page with a gimmicky navigation is still a single page without much to say (yes, I know they have other pages on their site, but I'm talking about that specific page).

[Ronald Roe]

That's just a bit of jQuery that makes the page scroll slower. There's several ways to do it, but I think Paul Und's is the best:

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
  e.preventDefault();
  var target = this.hash,
  $target = $(target);
  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 500, 'swing', function () {
      window.location.hash = target;
  });
});
});

[kralcx]

Here's a tutorial on parallax scrolling
http://webdesign.tutsplus.com/tutori...search_index=2

[$XTREME$]

That's just a bit of jQuery that makes the page scroll slower. There's several ways to do it, but I think Paul Und's is the best:

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
  e.preventDefault();
  var target = this.hash,
  $target = $(target);
  $('html, body').stop().animate({
      'scrollTop': $target.offset().top
  }, 500, 'swing', function () {
      window.location.hash = target;
  });
});
});

Great the javascript code is best

[Ronald Roe]

Here's a tutorial on parallax scrolling
http://webdesign.tutsplus.com/tutori...search_index=2

It isn't a parallax effect. It's just smooth scrolling.