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.
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.
<a name=”bottom” id=”bottom”></a>
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.)
<p><a href=”#bottom”>Bottom of the page</a></p>
In case you were wondering, the following is how to point at an anchor on a different page.
<p><a href=”pageName.html#bottom”>Bottom of the page</a></p>
All you need for the Javascript Smooth Scroll effect is to link to the JS file, it does everything else for you.
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.
<script type=”text/javascript” src=”smooth.pack.js”></script>
Download the Javascript file by Click Here
Credits : Web Design and Such
0 comments:
Post a Comment