Question

我在我的网站上使用jquery.scrollTo插件如下：

$service = new Service\Payment($client);

$json = '{
  "amount": {
    "value": 999,
    "currency": "USD"
  },
  "reference": "recurring-test",
  "merchantAccount": "[YOUR MERCHANT ACCOUNT]",
  "selectedRecurringDetailReference":' . $recurringToken . '
  "shopperEmail" : "wyldstallyns@email.com",
  "shopperReference" : "shopperref123456",
  "recurring" : {
    "contract" : "RECURRING"
  }
}'

$params = json_decode($json, true);

$result = $service->authorise($params);

对于大多数锚点，这可以100％正常工作。但是，当滚动到名称中包含冒号的元素时，会导致jQuery抛出异常。因此，例如，以下HTML不会按原样滚动：

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

在渲染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>

使用jquery.scrollTo时，使用jQuery处理元素ID中的冒号

1 个答案: