ページ内リンクへスクロールするアニメーションをUIkitで実装した際、タイトルが見切れる、ジャンプ位置がアンカーごとにバラバラになる、などの問題が発生したので、今回はその対処法をご紹介します。

アンカーリンクのジャンプ位置（デフォルト）

初めは以下のように記述していました。

リンクさせる要素内の最初に、高さのある画像があるため、タイトルや説明の部分が見切れる場所に遷移してしまっています。

デフォルトだと、idをふったブロックの最上部にジャンプしていることがわかります。

ジャンプ位置を調整する方法

idをふったターゲットより上や下に遷移させたい場合、その位置までオフセットでずらす必要があります。

オフセットとは、位置を基準点からの距離で表した値です。

今回は画像の高さの8割程度下にずらせばタイトルや本文も見える位置になるので、UIkitの指定に従い、HTML上で-200pxのオフセットを追記しました。

idをふったターゲットより下の位置に遷移させたい場合は値がマイナスになります。上にしたい場合はプラスになります。

<ul class="uk-nav uk-nav-default" uk-sticky uk-scrollspy-nav="closest: li; scroll: true; offset: -200;">

画像だけでなく、タイトルと説明が見える位置に遷移するようになりました！

応用：ターゲットごとにジャンプ位置を変えたい場合

上記では、オフセットが全て同じ高さの場合の対処法をご紹介しました。

では、ターゲットごとに遷移位置を変えたい場合はどのように対処すれば良いのでしょうか。こちらもご紹介します。

UIkitはアンカーごとにオフセットを指定することもできるので、親要素のulではオフセットを指定せず、aにそれぞれずらしたい高さ分のオフセットを指定します。

<ul class="uk-nav uk-nav-default" uk-sticky uk-scrollspy-nav="closest: li; scroll: true;">
  <li><a href="#sec1" uk-scroll="offset: -100;">1</a></li>
  <li><a href="#sec2" uk-scroll="offset: -300;">2</a></li>
  <li><a href="#sec3" uk-scroll="offset: -500;">3</a></li>
</ul>

画像の高さをバラバラにしましたが、無事にどのアンカーもベストな位置にジャンプしてくれるようになりました！

まとめ

UIkitでアンカーリンクのジャンプ位置を調整する方法をご紹介しました。

JSを使わずにHTML上で簡単に調整できるので、ぜひお試しください。

CSS / UIkit