I am trying to implement a smooth scroll when the user clicks on a link to an anchor in my Joomla site. The anchor link works fine, but the user is brought to the anchor instantly. I don't believe the javascript is working correctly, but I do not get any sort of error in my console on Google Chrome.

This is the exact working javascript I am using: http://codepen.io/anon/pen/RNBMXZ

It works fine there, but when I try to put it in my Joomla site, it does not. I currently have the script at the end of the article with the anchor, but I also tried to load it in a file in the header.

Like I said, I do not see any sort of errors, so I'm not sure where to go from here.

EDIT: Here is the output of console.log(target) when the anchor link is clicked. enter image description here

1 Answer 1


It sounds like you may not have wrapped document ready around your code, so try copying and pasting the following:

    $('a[href^="#"]').on('click', function(e) {

        var target = $( $(this).attr('href') );

        if( target.length ) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);

The problem

The problem being is that the child span element for your menu item has an onclick function, like so:

<a href="#test">
    <span onclick="window.document.location.href="#test">test</span>

So the standard href="#test" is not triggered.

I don't know how your template works, but somehow, you need to remove the following from the span element:

  • No change when implementing document ready. That's actually something I had tried.
    – Intrepid
    Commented Mar 4, 2015 at 19:12
  • start using console.log() to see if anything is returning null
    – Lodder
    Commented Mar 4, 2015 at 19:25
  • I've never used console log before. This does not seem to be working for me:jQuery(document).ready(function($){ $('a[href^="#"]').on('click', function(e) { console.log ( var target = $( $(this).attr('href') ); if( target.length ) { e.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000); } ); }); });
    – Intrepid
    Commented Mar 4, 2015 at 19:37
  • I added a console.log after my click function and when I click my anchor link, I see my console log. So it does appear that it is getting that far.
    – Intrepid
    Commented Mar 4, 2015 at 19:40
  • You only need to console log the variable like so: console.log (target);
    – Lodder
    Commented Mar 4, 2015 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.