【jQuery】ページ内リンク(アンカーリンク)の移動先の位置を変える方法

jQuery


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

ページ内リンクの位置を少し変えたい時はどうしたらいいんだろう?

 

 

といった方に対する記事となります。

ヘッダーを固定させた場合など、ページ内リンクを普通に作ると移動先の見出しなどが隠れてしまう事があります。

そういった場合、ページ内リンクを50pxだけずらしたいといったケースが出てくると思います。

今回はその方法について解説したいと思います。

 


今回の完成形

 

まずは今回の完成形を見てみます(スマホで見る場合はResultをタップして下さい)

See the Pen
ページ内リンク(ポジション修正)
by junpei (@junpei-sugiyama)
on CodePen.


前回作ったページ内リンクとの違いはヘッダーが固定されているという事です。

ちなみに前回作ったものはコチラです。

See the Pen
ページ内リンク
by junpei (@junpei-sugiyama)
on CodePen.

どちらもsectionの見出しの上に移動するようにしています。

それでは前回作ったものをベースにして、移動先の位置を変える方法を解説していきます。

前回作ったページ内リンクについての記事はコチラになります。

 

通常のページ内リンクでヘッダーを固定した場合

 

まずは前回作ったページ内リンクのヘッダーを固定してみます。

固定するだけで他は何も変更なしです。

See the Pen
ページ内リンク(ヘッダー固定のみ)
by junpei (@junpei-sugiyama)
on CodePen.


メニューをクリックしたら移動しますが、固定したヘッダーの高さ分section部分が隠れてしまいました。

ヘッダーが固定されていなければ問題ありません。


ヘッダーを固定して移動先の位置を編集

 

それでは本題である今回作るページ内リンクのHTMLを見てみます。

<header class="header">
  <nav>
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#works">WORKS</a></li>
      <li><a href="#gallery">GALLERY</a></li>
      <li><a href="#service">SERVICE</a></li>
    </ul>
  </nav>
</header>
<span id="about" class="link-position"></span>
<section class="about">
  <h2>ABOUT</h2>
  <p>
    ここにABOUTテキストが入ります。
  </p>
</section>
<span id="works" class="link-position"></span>
<section class="works">
  <h2>WORKS</h2>
  <p>
    ここにWORKSテキストが入ります。
  </p>
</section>
<span id="gallery" class="link-position"></span>
<section class="gallery">
  <h2>GALLERY</h2>
  <p>
    ここにGALLERYテキストが入ります。
  </p>
</section>
<span id="service" class="link-position"></span>
<section class="service">
  <h2>SERVICE</h2>
  <p>
    ここにSERVICEテキストが入ります。
  </p>
</section>

 

前回との主な変更点(追加点)は次の一行になります。

<span id="〇〇" class="link-position"></span>

 

各sectionタグの上にあるspanタグですね。

前回はsectionタグにidを付けましたが、今回はspanタグにidを移動しました。

つまりsectionタグではなく、spanタグに移動します。

そしてspanタグには各section共通で class=”link-position” というclassを付けました。

あとは移動先を変更させるのには関係ありませんが、デザイン的な事でsectionタグにはそれぞれsection名のclassを付けています。

 

あとはこの class=”link-position” にCSSを書きます(他にもデザイン的に前回とは少しCSSが変わっていますが、そこの説明は割愛します)

.link-position {
  display: block;
  position: relative;
  top: -62.5px;
}

 

ここで注目したいのは top: -62.5px; です。

これは移動先であるspanタグからマイナス62.5px、つまり上に62.5px位置を変えるという事です。

この数値は環境に合わせて変更して頂きたいのですが、今回の例ではヘッダーの高さが62.5pxだったので、top: -62.5px; としました。

もしあと10px上にして少し余白を付けたいといった場合は top: -72.5px; とすればOKです。

ちなみにjsファイルは前回と変更なしです。

それでは最後にもう一度完成形をみてみます。

See the Pen
ページ内リンク(ポジション修正)
by junpei (@junpei-sugiyama)
on CodePen.

以上です。

まとめるとclass名を付けたspanタグを追加して、そこにCSSを書くというだけです。