のリンク先について

Question

お世話になります。

goldページ内で、を使って
ページ内の指定した箇所に移動するようにしたいのですが、
と、画像にnameを指定すると
その画像の一番下のラインにあわせて移動します。

これを画像のトップ（上のあたり）に移動してほしいのですが
なにか方法はありますでしょうか？

理想は楽天さんのスーパーセールページみたいにしたいです。
https://event.rakuten.co.jp/campaign/supersale/?l-id=top_normal_bigbnr_pc_01_20190604_supersale_pre&l-id=ppf_pc_s2_t5_139435

よろしくお願いします。

Accepted Answer

ECマスターズの伊藤です。

URLのご連絡ありがとうございました。

> こちらのLINE UPのボタンで、それぞれのTOPに移動するようにしたいのです。

リンク自体は、ページの一番上になっておりますが、固定ヘッダーがあるため、
コンテンツがかぶってしまっているという状態ですね。


リンク先に
＝＝＝＝＝＝＝＝＝＝＝＝＝
margin-top:-【ヘッダーの高さ ※マイナスが必要です】
padding-top:【ヘッダーの高さ】
＝＝＝＝＝＝＝＝＝＝＝＝＝
を指定することで、ヘッダー分、ページ内リンクを下にずらす事ができます。

今回、id="○○"を画像に当てていただいていたと思いますが
そのままですと、背景色があるため、レイアウトが崩れてしまいますので
id="○○"は削除していただき、あらたに

を作成していただき、リンク先のTABLEの外に設置してください

例：新作の場合
＝＝＝＝＝＝＝＝＝＝＝＝＝


＝＝＝＝＝＝＝＝＝＝＝＝＝

IDの付与が完了致しましたら、スタイルシートに下記を追加してください。
＝＝＝＝＝＝＝＝＝＝＝＝＝
span.pagelink {
margin-top: calc((19vw + 44px) * -1);
padding-top: calc((19vw + 44px));
display: block;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝

上記方法にて、うまくいかない場合、お手数ですが再度ご連絡くださいますよう
お願いいたします。

Answer

ECマスターズの伊藤です。

> と、画像にnameを指定すると
> その画像の一番下のラインにあわせて移動します。

> これを画像のトップ（上のあたり）に移動してほしいのですが
> なにか方法はありますでしょうか？

通常ですと、ご連絡頂いた方法で、問題ございません。


一度、nameを削除していただき、画像に id="○○" で追加していただき
ご希望のリンク方法となるか、ご確認いただけますでしょうか。

＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝

もし、こちらで解決しない場合、ページを確認させていただきたいので、
お手数ですが、対象ページのURLをご連絡くださいますようお願いいたします。

Answer

伊藤様

早々にお返事ありがとうございます。
idでやってみたのですが、残念ながら結果は同じでした。

https://www.rakuten.ne.jp/gold/***/smp/1906_ss_smp.html

こちらのLINE UPのボタンで、それぞれのTOPに移動するようにしたいのです。
お手数ですが、一度ご確認いただけますと幸いです。
よろしくお願いいたします。

Answer

伊藤様

できましたーーー！！！
まさかヘッダーが邪魔をしていたとは。
めちゃくちゃ勉強になりました！！

ありがとうございました！！

Answer

ECマスターズの伊藤です。

無事、ご希望どおりのリンクが作成できたようで安心いたしました。

固定のヘッダーは便利な反面、なかなか曲者で、今回のようなことが起こってしまいます。
次回のページ作成時に、今回の件を活かしていただければ幸いです。