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 helper＆＃34; link_to＆＃34;时，写成这样：

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

选择器无法识别我的锚点，因为语言环境是在＃之前传递的。

当我点击＆＃34;发现＆＃34;我在控制台中遇到的错误就是那个：

未捕获错误：语法错误，无法识别的表达式：/ 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);
});

jquery选择器不识别link_to + anchor

1 个答案: