Adding jquery to Joomla 3.2 template

Question

I would like to add the scroll effect to my page, so that when I click on a menu link, it would go down a page to where it needs to. I have set it up so that when I click on a link it will go to the desired div, but when I tried adding a jquery code to index.php file nothing happens.

I'm using yougrids template and Joomla 3.2.

the div id is yjsg5 so I put in my menu link external link that links to #yjsg5. It works since when I click it it goes to that part of the page.

Now in my index.php I added this piece of code:

<script type="text/javascript">
        var $root = $('html, body');
    $('#yjsg5').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 2000, function () {
            window.location.hash = href;
        });
        return false;
    });
    </script>

at the end of the <body> tag. But that's not working. I've read that they changed something in Joomla 3 with jquery so this may be the reason why it's not working.

Any help would be appreciated :)

isherwood isherwood · Accepted Answer · 2014-03-10T00:13:41

Try putting your code inside a document.ready block with a namespace alias as an argument:

<script>
jQuery(document).ready(function($) {
    ...
});

// or 

jQuery(function($) {
    ...
});
</script>

Joomla probably loads jQuery using noConflict(), so you can't use $ unless you do this.

Also, by using this method you can then place your script anywhere on the page. jQuery will wait until the DOM is ready to run it.

Adding jquery to Joomla 3.2 template

1 Answers