1

アンカーリンクは、リンクにすぐにジャンプするのではなく、スムーズにスクロールできるようにアニメーション化する必要があります。これは両方向で機能するはずです。つまり、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ため、誰かがこれらを回避する方法を教えてくれたり、より良いアプローチを教えてくれたら幸いです。

4

1 に答える 1

1

そのパターンマッチでコロンをエスケープする必要はありません...。

ただし、コロンはセレクターでエスケープする必要があります。

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

最初のセレクターを変更する必要があります。

$("a[href*='#fn\\:']").click(function(event) {...});
于 2012-10-07T16:22:49.007 に答える