Rails 跳转到页面上的某个区域答案

【问题标题】：Rails Jump to a Certain Area on the PageRails 跳转到页面上的某个区域
【发布时间】：2015-11-26 00:14:10
【问题描述】：

我很难找到答案...

我的视图顶部有几个锚标记。我希望那些简单地链接（或在这种情况下滚动）到页面上的另一个区域。例如，如果单击“副作用”链接，我希望它会将它们带到页面上的副作用位置，当然不会重定向。

解决此问题的最佳方法是什么？ Javascript？

这是我的看法：

<div class="quick_links well">
  <h2>Jump to:</h2>
  <ol>
    <li><a href="#">Short answer</a></li>
    <li><a href="#">Long answer</a></li>
    <li><a href="#">Side effects</a></li>
  </ol>
</div>  

<div class="content">
  <h2>Short Answer<h2>
  <p>blah blah blah</p>

  <h2>Long Answer<h2>
  <p>blah blah blah</p>

  <h2>Side effects<h2>
  <p>blah blah blah</p>
</div>

如果已经有答案，请指出我的方向。我很难找到任何东西。

【问题讨论】：

标签： html ruby-on-rails ruby-on-rails-4 scroll

【解决方案1】：

哦，我知道这个！为您要跳转到的页面上的每个元素添加一个 id，然后将链接的 href 设置为链接跳转到的元素的 id。请注意维基百科的部分链接是如何工作的

<div class="quick_links well">
   <h2>Jump to:</h2>
   <ol>
       <li><a href="#short-answer">Short answer</a></li>
       <li><a href="#long-answer">Long answer</a></li>
       <li><a href="#side-effects">Side effects</a></li>
   </ol>
</div>  

<div class="content">
   <h2 id="short-answer">Short Answer<h2>
   <p>blah blah blah</p>

   <h2 id="long-answer">Long Answer<h2>
   <p>blah blah blah</p>

   <h2 id="side-effects">Side effects<h2>
   <p>blah blah blah</p>
</div>

这将允许您在单击链接时跳转到链接部分，您可以使用 javascript 使网页平滑滚动到链接元素。

在how to implement smooth scrolling to links 上提供指南，就像以往的 css 技巧一样进行救援

【讨论】：

【解决方案2】：

如果您打算使用 Rails link_to 标签完成它，请执行以下操作：

<%= link_to 'Short Answer', "#{pages_welcome_path}#short_answer" %>
<%= link_to 'Long Answer', "#{pages_welcome_path}#long_answer" %>
<%= link_to 'Side Effects', "#{pages_welcome_path}#side_effects" %>

【讨论】：

【解决方案3】：

您可以将锚属性传递给 Rails 中的 link_to 标记，使其更加简洁。

link_to 'Comments', public_topic_entry_path(@topic, @entry, anchor: "comments-title")

【讨论】：