WebDesign&Such

Using page anchors is a pretty basic web design technique. If you want to link to a certain part of a page you create an “Anchor” at that part of the page. This anchor is what you point your link at. You can link to an anchor on the current page, or to an anchor on a certain part of another page. Useful, but not all that exciting.

There is, however a quick way to make even the simple act of scrolling up and down a page more visually appealing. It’s called Smooth Scroll. Check out my demo to see this in action, and then keep reading to learn how to add Smooth Scroll to your website.

View Demo

So lets start with the basics. To add an anchor on your page add the following in the place that you want you page to scroll to.

Then to point your link at this anchor, use the following. (This is to point to an anchor on the same page as the link.)

In case you were wondering, the following is how to point at an anchor on a different page.

All you need for the Javascript Smooth Scroll effect is to link to the JS file, it does everything else for you.

Dowload Smooth Scroll Javascript

You’ll see the zip has all original files for the Smooth Scroll. Now I give credit where it’s due, this entire zip is from DezinerFolio. Make sure you check those guys out for some great freebies and code.

To link to the Javascript file, put the following in your head.

The javascript file is the only file in the zip that you need to use for the Smooth Scroll to work. Have fun, and if you want to an actual webpage that uses this effect, check out the website portfolio of my website.