问号“？”在锚 link

Question

我这里有 jsfiddle 来说明我的问题。

https://jsfiddle.net/morettmt/psh674k7/69/

我有一个带锚点 link 的导航到页面中的块（它工作不完美，但这不是问题所在）。

这是在 WordPress 站点中实际使用的，其中块和 links 是由后端的内容管理器创建的。

我的问题是 link 如果有问号 '?' 之类的字符则无法正常工作在里面。

如果 link.

中有问号，为什么这不起作用

.block{
    background: #ddd;
    height: 300px;
    margin: 0 0 10px 0;
    padding: 10px;
}

Answer 1

在您的 HTML 中，删除 a 标签上 href 的问号：

<nav>
    <ul>
        <li><a href="#one" class="js-sticky-link">One</a></li>
        <li><a href="#two" class="js-sticky-link">Two</a></li>
        <li><a **href="#three"** class="js-sticky-link">Three?</a></li>
        <li><a href="#four" class="js-sticky-link">Four</a></li>
        <li><a href="#five" class="js-sticky-link">Five</a></li>
    </ul>
</nav>

此外，删除 div 上 id 的问号：

<div class="col-sm-12">
    <div class="three block" **id="three"**>
        <h2>Three</h2>
    </div>

我在更改的地方添加了星星。

Answer 2

要使 link 与脚本一起工作，您需要转义问号以便它作为选择器工作：

<a href="#three\?" class="js-sticky-link">Three?</a>

但是，如果回退到使用本机书签，这会使它失败。为此，您可以 URL 将问号编码为 %3f:

<a href="#three%3f" class="js-sticky-link">Three?</a>

然后为了使脚本工作，它应该将 URL 编码的书签转换为转义的选择器：

$('html, body').animate({
  'scrollTop': $($(this).attr('href').replace(/%3f/ig, '\?')).offset().top-navHeight
}, 1000);

这里是fiddle实现的地方。我还添加了一个 link 用于打开和关闭动画，以便您可以测试回退行为：https://jsfiddle.net/Guffa/psh674k7/83/

要使其适用于任何字符，您可以使用 decodeURIComponent 方法对字符串进行 URL 解码，然后转义任何需要转义以使其在选择器中起作用的字符，如this question.

中显示

问号“？”在锚 link

Question mark '?' in anchor link

html

anchor