Smooth scrolling to anchor on same page

Question

Call me stupid, but I don't see it. I have made a Joomla page with links to sections in the same page. very basic: <a href="#sed"> and then <p id="sed">. I include jQuery like this:

  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

It is part of Joomla 3.

I am using this script from CSS-Tricks, which I have put in the of the page:

    <script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

I've fiddled with the CSS Tricks sample page (copy/pasted it to my own HTML editor and changed a bit of the code) and yes, it works, but I can't get it to work in my own page. The page just jumps to the anchor but doesn't scroll smoothly.

Mind you: I hardly know anything of JavaScript or jQuery, so bear with me... to a jQuery specialist this must be a piece of cake....

Here is the test page I have made: http://test.tomhiemstra.nl.

Any help appreciated.

Cheers,

Thom

Answer 1

With the help of Talya S. above, this is what I have come up with. I hope I have done it right, with all the brackets and curly brackets etc.:

    <script>
   (function ($) {
$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});
})(jQuery);
</script>

Did I add too many brackets or too few?

What I still don't understand, though, is why the $ was not recognised as jQuery, which is one of the most basic things you learn in jQuery (yes, I had come that far :-P). If anyone can clarify that to me "like I'm a four year old".

Thanx again Talya S. and my apologies for misspelling :-)

Thom

Answer 2

I couldn't figure out what's causing this, but on your page the $ isn't getting recognized. Replace all the $ in your script to jQuery and it works.

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Alternatively, it's probably a better idea to wrap your function in one that will map the $ to jQuery.

(function ($) {
    $(function () {
        $('a[href*=#]:not([href=#])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
})(jQuery);

Answer 3

Can you try this

$('a[href^="#"]').click(function(event) {
	event.preventDefault();
	var target = $(this).attr("href").substring(1);
	if(target) {
		$('html,body').animate({
          scrollTop: $('[name=' + target +']').offset().top
        }, 1000);
	}
});