title: Replace colon in href attribute in JavaScript or jQuery
body: <p>I have a problem handling IDs with a colon in jquery. If there is a colon in an ID the smooth scroll doesn't work. </p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;a href="#fn:1"&gt;Go to Footnote 1&lt;/a&gt;
  
  &lt;div id="fn:1&gt;Lorem ipsum Bla Bla&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>  var $root = $('html, body');
    $('a').click(function() {
      var href = $.attr(this, 'href');
      $root.animate({
          scrollTop: $(href).offset().top
      }, 400, function () {
          window.location.hash = href;
      });
      return false;
  });
  </code></pre>