のリンク先について

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

<a name="#○○">のリンク先について

カテゴリーから探す