link_toで指定したIDのページへ飛ばす

少しハマったので忘備録として残します。

1. 飛ばしたい位置(指定したいリンク先の場所)のタグにidを指定

home/index.html.erb

<h1 class="display-4" id="service">サービス概要</h1>
省略

---

1. pathの引数にanchor: "ID名"を渡してあげる

layouts/_header.html.erb

<%= link_to "サービス概要", root_path(anchor: "service"), class: "nav-item nav-link" %>

同時にclassも指定することも可能です。

---

以上です。簡単ですね。

上の例の場合だと、ヘッダーのナビリンク内のにサービス概要というリンクがあり、どのページからでもサービス概要をクリックすれば、home/indexページ内のサービス概要と<h1>で書かれている場所まで飛ばしてくれます。