railsでページ外からリンクした際に、ページ内のアンカーリンクまで飛ばしたいです。簡単なはずなのに解決できず大変困っております。

Question

ページ外に貼ってあるリンクをクリックをした際に、
ページ内のidまで移動して表示させたいのですが、なかなか調べても見つけられず教えていただけると非常に嬉しいです。
（jquryを使用していましたが、ページが重くなってしまい原因調査が必要なため、htmlだけで実装したいです）

###現在の実装例
現在、お客様への通知メールに

https://example.com/pages#daiji

といった#付きのリンクを貼っております。

メールのリンクをクリックし、webページに記載されいている
＃daijiのところまで移動してくれません。

（メールはテキストメールのため、link_to　や　<a href =　###>といった記述を行うことができません。）

###HTML

<div id="daiji">
　<h2>新着報告</h2>
</div>

アドレスでid=daijiまで移動させるにはどうのように記述すればよいのでしょうか？
実アプリのため、ユーザビリティが悪く怒られており、どなたか助けて頂けますと大変嬉しいです。
どうぞよろしくお願いいたします。

Comments

[k_a]

通常であれば記載の内容だけでアンカーへ遷移するはずですが、Rail特有の何かがあるのかもしれません。

jQueryを使用するとページが重くなるというのは、jQueryを読み込むだけで重くなるということでしょうか？それとも今回の処理を実現しようとすると重くなるということですか？

アンカーの方には何か簡単な原因があるのかもしれませんが、早急の対応が必要なのであれば一旦jQueryで誤魔化しておくのが良いと思います。
今回の処理程度で重くなることは無いと思うので、そちらの原因解消の方が楽かもしれません。

jQueryで実現するならこんな感じになると思いますが、これも重くなりますか？
```
$(window).on("load", function () {
const hash = location.hash;
if (hash && $(hash).length > 0) {
setTimeout(() => {
$("html, body").animate({ scrollTop: $(hash).offset().top }, 0);
}, 0);
}
});
```

[akikko]

大変ご丁寧に本当にありがとうございます。
記載内容だけでアンカーへ遷移するのですね????なるほど・・・そうしますと、何かよく分からないものが邪魔をしている可能性がありますね????

jQueryも大変ありがとうございます。
bootstrapのタブをひらいてからスクロールを行っておりまして、
$(function(){
if (location.hash) {
var url = window.location.href;
var activeTab = url.substring(url.indexOf("#") + 1);
$('a').removeClass("active in");
$('a[href="#'+ activeTab +'"]').tab('show');
$("html,body").animate({scrollTop:$('a[href="#'+ activeTab +'"]').offset().top});
return false;
}
});
という記載を行っています。
この記載を実装した後、サーバーのtimeoutが頻発するようになってしまいまして、どうしたものかと頭を悩ませております。

[winterboum]

そのページの構造はシンプルですか？なにか工夫入れてません？
何かしないと hide になってるとか
閉じてるタブの中にある、とか

[akikko]

>winterboum様
ありがとうございます。bootstrapのタブ構造(３つ　詳細・報告・コメント）になっておりまして、メイン（詳細）のタブclassに「active」が入っております。
#付きのリンクをクリックした際に、一度activeクラスを削除し、報告タブを開かせて、そこまでスクロールさせるjQueryを書いております。
この処理自体が問題ありそうでしょうか！？

Answer 1

アンカー付きのURLでアンカーに行かないとすると、「実は行っているのだがアクティブなタブではないのでそう見えない」では無いのかな、と思います。
開きたいタブのidを仮に 'daiji_tab' としたとして
https://example.com/pages?tab=daiji_tab#daiji とし

aactionで
@activetab = params[:tab] || defaultなタブのid
として、
viewにて、@activetab な tab をactiveにする、
としてみてはどうでしょう