javascript - 使用 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 });
});

对于大多数 anchor 来说，这都可以 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 脚注时，这尤其是一个问题。正如我假设的大多数其他处理器一样，我使用的 Markdown 处理器 ( Black Friday ) 使用在每个交叉引用中包含冒号的约定来呈现脚注。

有人可以帮忙吗？

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>