jQuery: Select a href containing colon
<p>My anchor links should be animated, so that they do not jump immediate to the link but rather scroll in a smooth fashion. 
This should work in both directions, i.e. when clicking on the link containing the <code>footnote</code> and the <code>reversefootnote</code> class.</p>

<h2>Structure</h2>

<p>HTML</p>

<pre><code>&lt;p&gt;
  Some text.
  &lt;a href="#fn:1" id="fnref:1" title="see footnote" class="footnote"&gt;[1]&lt;/a&gt;
&lt;/p&gt;

&lt;div class="footnotes"&gt;
  &lt;ol&gt;
    &lt;li id="fn:1"&gt;
      &lt;p&gt;
        A footnote.
        &lt;a href="#fnref:1" title="return to article" class="reversefootnote"&gt;&amp;nbsp;?&lt;/a&gt;
      &lt;/p&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$("a[href*='#fn\\:']").click(function(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    var $el = $(href);

    $("html, body").animate({"scrollTop": $el.offset().top}, 500);
});
</code></pre>

<h2>Problem</h2>

<p>The problem that it does not work occurs only when I use a colon in <code>href</code>, therefore I would be more than happy if someone can show me a way how to escape these, or even show me a better approach.</p>
