title: Smooth scrolling to anchor on same page
body: <p>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: <code>&lt;a href="#sed"&gt;</code> and then <code>&lt;p id="sed"&gt;</code>. I include jQuery like this: </p>
  
  <pre><code>  &lt;script src="/media/jui/js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It is part of Joomla 3.</p>
  
  <p>I am using this script from <a href="https://css-tricks.com/snippets/jquery/smooth-scrolling/" rel="nofollow">CSS-Tricks</a>, which I have put in the  of the page: </p>
  
  <pre><code>    &lt;script&gt;
  $(function() {
    $('a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; 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;
        }
      }
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I've fiddled with the <a href="https://css-tricks.com/examples/SmoothPageScroll/" rel="nofollow">CSS Tricks sample page</a> (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. </p>
  
  <p>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....</p>
  
  <p>Here is the test page I have made: <a href="http://test.tomhiemstra.nl/index.php" rel="nofollow">http://test.tomhiemstra.nl</a>. </p>
  
  <p>Any help appreciated.</p>
  
  <p>Cheers,</p>
  
  <p>Thom </p>