I am a total novice when it comes to javascript hence I am seeking your help.
My markup is like this:
<body >
<div class="header_link">
<h1 style="clear:both; padding:5px;">Smooth Scroll by Dezinerfolio</h1>
<a name="top" href="#footer">GO TO FOOTER</a>
<a href="#middle">GO TO MIDDLE</a>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. </p>
</div>
<div class="middle_link">
<a name="middle" href="#top">GO TO TOP</a>
<a href="#footer">GO TO FOOTER</a>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. </p>
</div>
<div class="footer_link">
<a name="footer" href="#top">GO TO HEADER</a>
<a href="#middle">GO TO MIDDLE</a>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis leo quis metus. </p>
</div>
</body>
What I want is when a visitor clicks on that perticular button, the page should smoothly / slowly scroll to that perticular div.
I know there are a lot of plugins in jQuery and MooTools but I do not want to use them because this is the only javascript function requred in my site and rest is all plain CSS activity. Hence there is no point loading a whole 60 to 100 KB of JavaScript library (jQuery or MooTools) to achieve this small function. I am looking for a simple plain JavaScript function
Kindly help!
You could just look at the jQuery source and see how they do it.
Alternatively, Google told me about these pages, which look promising: