Handling colon in element ID with jQuery when using jquery.scrollTo

Question

I am using the jquery.scrollTo plugin on my site as follows:

$('a[href^="#"]').click(function (e) {
    e.preventDefault();
    $(window).stop(true).scrollTo(this.hash, 
       { duration: 500, interrupt: true, margin: true });
});

This works 100% fine for most anchors. However, when scrolling to elements that contain a colon in the name, it causes jQuery to throw an exception. So, for example, the following HTML does not scroll as it should:

<a rel="footnote" href="#fn:1">1</a>
...
<ol>
    <li id="fn:1">
        Footnote 
        <a class="footnote-return" href="#fnref:1">
            <sup>[return]</sup>
        </a>
    </li>
    ...
</ol>

This is especially a problem when rendering markdown footnotes. The markdown processor that I use ( Black Friday ), as I assume most other processors, render footnotes with a convention that contains a colon in every cross-reference.

Can anyone help?

Answer 1

All you need to do is escape the colons ( .replace(':', '\\\\:') ):

$('a[href^="#"]').click(function (e) {
  e.preventDefault();
  $(window).stop(true).scrollTo(this.hash.replace(':', '\\:'), 
    { duration: 500, interrupt: true, margin: true });
});

Working example:

 $('a[href^="#"]').click(function (e) { e.preventDefault(); $(window).stop(true).scrollTo(this.hash.replace(':', '\\\\:'), { duration: 500, interrupt: true, margin: true }); }); 

 ol { margin: 90vh 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script> <a rel="footnote" href="#fn:1">1</a> ... <ol> <li id="fn:1"> Footnote <a class="footnote-return" href="#fnref:1"> <sup>[return]</sup> </a> </li> ... </ol>