使用jquery.scrollTo時，使用jQuery處理元素ID中的冒號

Question

我在我的網站上使用jquery.scrollTo插件，如下所示：

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

這適用於大多數錨點100％罰款。 但是，當滾動到名稱中包含冒號的元素時，會導致jQuery拋出異常。 因此，例如，以下HTML不會按原樣滾動：

<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>

在渲染markdown腳注時，這尤其是個問題。 我使用的降價處理器（ 黑色星期五 ），我假設大多數其他處理器，使用在每個交叉引用中包含冒號的約定來呈現腳注。

有人可以幫忙嗎？

Answer 1

你需要做的就是逃避冒號（ .replace(':', '\\\\:') ）：

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

工作范例：

 $('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>