如何在Ruby on Rails中创建一个锚点并重定向到该特定锚点

Question

我想为我的博客中的每个评论创建唯一的锚点，以便用户可以将锚点的URL复制到浏览器中，自动加载页面并滚动到其评论开始处。

也许我走错了路，但是我尝试过这种方式，但没有成功。

评论查看 - 失败1 - 将此链接粘贴到浏览器中时，它不会滚动到所需的位置。

<%= link_to '#', :controller => 'posts', :action => 'show', :id => comment.post, :anchor => 'comment_' << comment.id.to_s %>

评论控制器 - 失败2 - 在浏览器中网址正确，但没有滚动发生，页面仍停留在顶部

redirect_to :controller => 'posts', :action => 'show', :id => @post, :anchor => 'comment_' + @comment.id.to_s

如果有人能帮忙，我会非常感激 :)

更新：以下解决方案几乎有效，但是当我点击它时，会出现以下URL，而该URL无法滚动到：

# 即 http://localhost:3000/posts/please-work

- Damian

---

为了进行屏幕滚动，URL必须指定您希望滚动到哪里。要做到这一点，您必须在URL末尾加上一个#comment_123。'#'后面的文本需要与锚点标记中'name'属性的值匹配。如果更新中的URL缺少'#'，则该URL不会滚动。 - vrish88

是的，我试过了 - 不起作用！原来是 :anchor 创建了这个 URL<a anchor="comment_126" href="/posts/please-work">#</a>但使用 :name 将其更改为此内容，正如您所说，这就是我想要的。有什么想法为什么会这样？ <a name="comment_126" href="/posts/please-work">#</a> - Damian

哦，好的，我明白了。抱歉让你感到困惑。我更新了我的答案，但看起来你必须手动将锚点连接到URL的末尾。否则，link_to标签会认为:anchor是一个HTML属性。希望这样可以解决问题 :) - vrish88

是的，那就是我最终做的。感谢你帮助我到达那里 :) - Damian

你可以像这样添加锚点：post_path(@post, :anchor => "some_text")。只需将锚点作为参数传递给post_path，而不是link_to。 - klew

Answer 1

实际上，锚点是路径的一种选项，而不是link_to的选项

<%= link_to '#', post_path(comment.post, :anchor => "comment_#{comment.id}") %>

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#M001565

link_to "Comment wall", profile_path(@profile, :anchor => "wall")
       # => <a href="/profiles/1#wall">Comment wall</a>

- XGamerX

Answer 2

看起来你想使用你问题中的link_to代码。然后在你的评论列表中，你必须确保有一个命名相同的锚点标签。

所以这样做：

 <%= link_to 'Your comment', post_path(@comment.post) + "#comment_#{@comment.id.to_s}" %>

将生成类似于这样的内容。

 <a href="localhost:3000/posts/2#1comment_234">Your comment</a>

 /* html code */     

 <a name="comment_1234">This is a comment</a>

您需要手动添加#comment_，否则link_to方法会认为您传递的:anchor属性是针对该标签的。

- vrish88

---

你应该使用XGamerX的答案。这个方法可以工作，但不够优雅。 - marcgg

Answer 3

这是对@XGamerX答案的改进。

<%= link_to '#', [comment.post, { anchor: dom_id(comment) }] %>

或者

<%= link_to '#', post_path(comment.post, anchor: dom_id(comment)) %>

- Mohamad

Answer 4

这是最好的方法：

<%= link_to '#', post_path(comment.post, anchor: dom_id(comment.id)) %>

- nilid

Answer 5

试试这个：

<%= link_to '#', post_path(comment.post), :anchor => "comment_#{comment.id}" %>

- John Topley

---

这几乎可以工作，但是如果我单击它，它会出现以下URL，但不会滚动到它。{{link1：#}}即http://localhost:3000/posts/please-work - Damian

Answer 6

这些链接将滚动到您拥有代码的位置：

<a name="comment_1"></a>

我不知道是否有助手可以为您完成，但这非常简单，您可以自己编写。

- klew