Posted by: Peter Andrease

Posted on: March 1, 2011 9:25 am


Slow Page Scroll With JQuery & Anchors

This tutorial will show how to create anchor links and using some jquery we will make those links into a nice slow tansition instead of jumping between anchors.

Firstly create your anchors points in your html as shown below:

To test it works simply put a div in the middle with a height larger than your screen size, like that below:

When you view this html code in the browser it should just jump from the top to the bottom and vice versa when you click the links. To make the links into a smooth transition you will first need to point to the latest version of jquery, click here to download.

You now need to create a new javascript file and add the following code, click here to view the code.

You can also adjust the speed of the transition. Simply change the ss.STEPS at the bottom of the code to a higher amount to slow the transition and a lower amount to speed it up, it is currently set at 50.

Peter Andrease

Peter Andrease

Peter heads up the entire web design team at our agency and enjoys delivering interesting posts that deal with brand new design tips, tricks and tools. As his strengths also lie in client training, Peter has also produced a huge number of tutorials on the subject of design, many of which can be found elsewhere on the site.