Built with MooTools JavaScript Library 1.1.2.
View source in your browser to see the code.
Method: I made 4 CSS divisions simply labled #Layer1, #Layer2, #Layer3 and #Layer4. Each division is relatively positioned on a very wide page. You don't need precise numbers for this. It will work on almost any size page.
Click links below to see SmoothScroll in action:
Music player by Pickle Player
This code goes between the <head> and </head> tags in your document.
<script type="text/javascript">
window.addEvent('domready',function() { new SmoothScroll({ duration: 2000 }); });
</script>
You can change the amount of time it takes to reach the named anchor or division by editing duration:value in the event handler code. A smaller number = faster scrolling. A larger number = slower scrolling.
SmoothScroll is smart. The script calculates distance between anchors and adjusts scroll speed up or down accordingly to equal duration:value.
Standard links look like this:
<ul>
<li><a href="#Layer1">Layer 1</a></li>
<li><a href="#Layer2">Layer 2</a></li>
<li><a href="#Layer3">Layer 3</a></li>
<li><a href="#Layer4">Layer 4</a></li>
</ul>
That's all there is to it. We hope you enjoyed this SmoothScroll demonstration.