Question

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 footnote and the reversefootnote class.

Structure

HTML

<p>
  Some text.
  <a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a>
</p>

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

jQuery

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

    $("html, body").animate({"scrollTop": $el.offset().top}, 500);
});

Problem

The problem that it does not work occurs only when I use a colon in href, 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.

Answer 1

you don’t need to escape the colon in that pattern match….

but the colon should be escaped in the selector:

var $el = $(href.replace(':', '\\:'));

and the first selector should be altered:

$("a[href*='#fn\\:']").click(function(event) {...});