如何在 Rails 中使用 Ajax 链接和锚点答案

【问题标题】：How to use Ajax links with anchors in Rails如何在 Rails 中使用 Ajax 链接和锚点
【发布时间】：2018-06-11 13:16:59
【问题描述】：

我正在尝试创建一个导航面板，它使用 AJAX 在页面之间切换，并且可以链接到 Rails 5.1 应用程序中这些页面上的锚点。

根据我的阅读，以下代码应该可以工作，但不能。

<%= link_to @section.title, from_nav_path(@topic, anchor: @section.css_id), remote: true %>

（如果还不清楚，主题has_many 部分和部分belongs_to 主题）

我已经阅读了thisstackoverflow 帖子，以及这两个参考页面（api doc 和 mix and go）。

当它没有设置为remote: true 时，它可以通过show 操作正常工作，但我不想重新加载页面。

目前，它确实会更改为正确的页面，但它只是停留在页面顶部，而不是跟随锚点。我缺少什么来完成这项工作？

我还尝试将javascript回调独立并联合添加到要加载的部分和from_nav.js.erb文件中。一切都无济于事。

【问题讨论】：

您帖子中的链接已被删除。请修复它们
在发送请求之前，您是否在页面上有 id @section.css_id（点击链接）？
@KartikeyTanna 链接已修复，对此感到抱歉。
@ArtemDorodovskyi 我不确定我是否理解你的问题。我需要 rails 来加载部分，然后在该部分中跳转到 @section.css_id。因此，当您看到 link_to @section.css_id 尚未加载时，因为尚未调用部分。

标签： javascript ruby-on-rails ruby ajax

【解决方案1】：

您不能将锚选项与遥控器一起使用。锚点是一段标记超文本链接开始和/或结束的文本。但是 remote 是 Rails 中的一个辅助方法，它添加到标签 data-remote="true" 属性，然后 Rails 知道需要发送 XHR 请求。锚点不适用于 XHR 请求。因此，您可以在 from_nav.js.erb 中添加 javascript 到 scroll to the element

var elmnt = document.getElementById("<%= @section.css_id %>");
elmnt.scrollIntoView();

【讨论】：

我实际上无法让elmnt.scrollIntoView(); 工作。根据我的阅读，这可能与 Turbolinks 有冲突。不清楚。但是，我能够使其与window.location = '#<%= params[:scrolltohere] %>'; 一起使用（显然，将我的link_to 更改为通过scrolltohere: @section.css_id
是的，你说得对。 Turbolinks 访问不会滚动到页内锚点和 window.location = '#<%= params[:scrolltohere] %>'; 最佳问题。