问号'？' 在锚链接

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解码,然后转义任何需要转义的字符以使其在选择器中起作用,如此问题所示.