Селектор jquery не распознает link_to + якорь

Question

У меня есть панель навигации, на которой я использую функцию jquery, которая генерирует плавную прокрутку, когда кто-то нажимает на конкретную ссылку.

Мой js-код такой:

$(document).on('click', 'a[href*=\\#]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 800);
});

И он хорошо работает, когда элемент в моей панели навигации написан так:

<div class="nav-element">
  <a href="#features">
    <%= t('landing.navbar.features') %>
  </a>
</div> 

Однако, когда я используювспомогательный rails "link_to", записанный так:

<div class="nav-element">
  <%= link_to root_path(anchor: "discover") do%>
    <%= t('landing.navbar.discover') %>
  <% end %>
</div>

Селектор не распознает мою привязку, потому что локаль передается перед #.

Ошибка, которую я получаю в консоли, когда нажимаю «открыть», такова:

Uncaught Error: синтаксическая ошибка, нераспознанное выражение: / fr # Discover

Как это возможно, что даже если я использую href*=\\#, он не обнаружит привязку в /fr# или /en#?Что я мог бы сделать для того, чтобы продолжать использовать мой link_to и при этом иметь плавную прокрутку?

Большое спасибо!

Answer 1

Вам нужно проанализировать href, чтобы получить только значение хеш-функции:

// Hook on to all the links containing #
$(document).on('click', 'a[href*="#"]', function (event) {
    event.preventDefault();

    // Get the hash of the href only
    var hash = $(this).attr('href');
    hash = hash.substr(hash.lastIndexOf('#'));

    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 800);
});