Question

我的锚点链接应该是动画的，这样它们就不会立即跳转到链接，而是以平滑的方式滚动。这应该在两个方向上都有效，即点击包含footnote和reversefootnote类的链接时。

结构

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);
});

问题

只有当我在href中使用冒号时才会出现无法解决的问题，因此，如果有人能告诉我如何逃避这些问题，或者向我展示更好的方法，我会非常高兴

Answer 1

你不需要在那种模式匹配中逃避冒号....

但冒号应该在选择器中转义：

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

并且应该改变第一个选择器：

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

jQuery：选择一个包含冒号的href

结构

问题

1 个答案: