Question

我在这里用jsfiddle来说明我的问题。

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

我有一个导航链接到页面中的块（这不是完美的，但这不是问题。）

这实际上是在Wordpress网站中使用，其中块和链接由后端的内容管理器创建。

我的问题是，如果链接有问号等字符，则链接不起作用？在它。

如果链接中有问号，为什么这不起作用。

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

Answer 1

要使链接与脚本一起使用，您需要转义问号，以便它可以作为选择器使用：

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

这是一个实施它的小提琴。我还添加了一个用于打开和关闭动画的链接，以便您可以测试回退行为：https://jsfiddle.net/Guffa/psh674k7/83/

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

Answer 2

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

<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>

另外，请从id上的div删除问号：

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

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

Answer 3

删除“？”来自链接href以及来自“三节”和“三节”的div id链接。

我希望这可能有所帮助。

问号'？'在锚链接

3 个答案: