LoginSignup
6
7

More than 3 years have passed since last update.

Rails link_toでアンカーを設定する

Posted at

背景

スタッフの詳細ページにそのスタッフが作成したメニューの一覧を表示したいが、ただリンクさせるだけだと
スクロールをしなくてはならないためあまりつかいやすいとは思わなかったため

*個人の備忘録のために記載

環境

Rails 5.2.3
ruby 2.6.3

まずリンク先の飛びたい場所にidを指定

<div class="mi-contents2" id="staff_menu">

link_toにanchorを指定する

<%= link_to 'テキスト', リンク先のpath(anchor: 'リンク先のid', ~~~ %>

下記が実際の設定した例

<li class="usi-menu"><%= link_to 'このスタッフのメニューへ', staff_path(staff.id, anchor: 'staff_menu'), class: 'btn btn-primary' %></li>

上記のような記述をすると

<a href="/staffs/1#staff_menu">

のようなリンクが生成される

参考にしたサイト
kzy52's blog
Rails アンカーリンクを使い遷移先ページの場所(位置)を指定する

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7