Smooth Scrolling for Go to Top using MooTools in Joomla

Go to Top scrolling in Joomla

Go to Top scrolling in Joomla

Joomla template developers may often use Go to Top link in their templates which on clicking scrolls the page to the top. However, by default the scrolling is not smooth and it looks a bit nasty. However, In Joomla, we can add a smooth scrolling effect to the existing HTML Top link using MooTools Javascript library.

MooTools library is by default supported by Joomla CMS. Hence, we only need to enable the library for the template and write only a couple of lines to make it feel better and more professional. So, lets move on to create a simple yet effective scrolling Go to Top link.

First of all you need to create the Go to Top link by adding a named anchor right after the body tag with following code:

<a name="top"></a>

Now, create a link at the bottom of the page, which on clicking scrolls to the top of the page, with following code:

<a href="#top">Top</a>

Here, we have created a simple HTML hyperlink to move at the top of the page.

Lets add some effect to make it scroll nicely. For this, first of all you need to enable MooTools library in your Joomla template. For this, add following line of code inside the PHP tags in header part of the template:

JHTML::_('behavior.mootools');

Now, again inside the header part, use the following javascript code snippet:

<script>
window.addEvent('domready',function() {
      new SmoothScroll({ duration:700 }, window);
});
</script>

That’s it. We are done. Now, refresh the frontend of the template and scroll down to the Top link. Click on it and you will see a nice effect to scroll to the top of the page.

Cheers!!

You can leave a response, or trackback from your own site.

3 Responses to “Smooth Scrolling for Go to Top using MooTools in Joomla”

  1. gabriel says:

    hi, thanks for the tip.
    but i have an issue.
    that worked fine, but when i turn the mootools plugin on, some of my plugins stop working. if I turn mootools upgrade off, everything goes well, but the smooth scrolling stops working.

    i dont know much of mootools or if there’s any way to solve this conflict.
    thanks in advance.

  2. I used ja purity ii.
    It didn’t need the code JHTML::_(‘behavior.mootools’); .
    And it works very well.
    Thanks.

    • admin says:

      Badrun,
      This code is helpful when you develop your own template. Often template designers and developers use this code for creating smooth effects in their templates. Yes, Ja Purity II already consists this code and you don’t need to add it with purity template.

Leave a Reply

*

Powered by WordPress | Buy cheap cell phones at iFreeCellPhones.com | Thanks to iCellPhonePlans.com, Facebook Games and Free Ads