Вопросительный знак '?' в якорной ссылке

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-декодирования строки, а затем избегать любых символов, которые должен быть экранирован, чтобы заставить его работать в селекторе, как показано в this question.

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 для «Three Section» и «Three?». Ссылка.

Надеюсь, это может помочь.