Question

我很难找到答案......

我的视图顶部有一些锚标记。我希望那些只是链接（或在这种情况下滚动）到页面上的另一个区域。例如，如果单击＆＃34;副作用＆＃34;链接，我想将它们带到页面上的副作用位置，当然没有重定向。

最好的方法是什么？ 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>

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

Answer 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技巧来到了救援

Answer 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" %>

Answer 3

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

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

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

3 个答案: