12
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails アンカーリンクを使い遷移先ページの場所(位置)を指定する

Posted at

rails初心者駆け出しエンジニアの備忘録用です。
訂正やアドバイスありましたらお願いします。

railsのビュー作成していてリンクボタンを押した後の遷移先ページの中で更に場所(位置)を指定する方法です。

ページ遷移した後にページの一番上からではなく、ページの真ん中の位置に飛ぶようにしたりする方法です。
ページ内リンクと似ています。が遷移先の他のページの位置を指定するイメージです。
そういった実装が必要になったときに、アンカーリンクという言葉を教えてもらいました。

アンカーリンクという言葉が全く分からない方はこちらを参照に
####HTMLアンカーリンク

##link_toと組み合わせる


<%= link_to 'リンクのテキスト', リンク先のページのpath(anchor: 'リンク先のページの途中のID'), class: 'クラス名' %>

リンクのテキストって文字をクリックするとリンク先ぺーじのリンク先の要素の指定ID位置に飛べます。

これを実装すると


<%= link_to 'ホゲホゲページの最下部へ', hogehoge_path(anchor: 'saikabu'), class: 'hogehoge' %>


遷移先のホゲホゲページのhtml


<div>
<p>hoge</p>
</div>

<br>
<br>

<div>
<p>hoge真ん中</p>
</div>

<br>
<br>


<div>
<p id="saikabu">hoge最下部</p>
</div>





ホゲホゲページの最下部に飛べます。
実務での実装ではかなり役にたちました。

####参考
railsでアンカー付きのリンクを書く

では

12
14
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
12
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?