AMPライブラリを使ったページ内リンクの実装

AMPコンポーネントはAMP対応のページで利用するのが普通ですが、実際にはAMP以外の通常のページにも使うことができて、使い方さえ覚えれば、外部スクリプトのダウンロードから実行まで非同期で実行してくれるので結構便利だったりします。

そんなAMPライブラリを使ってページ内リンクを実装する方法です。

AMPライブラリを使わない、通常のページ内リンクの例は以下の通り。

HTML

<ul>
  <li><a href="#pagesection-1">ページ内リンク１</a></li>
  <li><a href="#pagesection-2">ページ内リンク２</a></li>
  <li><a href="#pagesection-3">ページ内リンク３</a></li>
</ul>

<div id="pagesection-1" style="margin:600px 0px;">ページ内リンク１の内容</div>
<div id="pagesection-2" style="margin:600px 0px;">ページ内リンク２の内容</div>
<div id="pagesection-3" style="margin:600px 0px;">ページ内リンク３の内容</div>

動作確認はこちら。

AMPコンポーネントを利用する場合、必ずAMP実行用のライブラリ「v0.js」を外部スクリプトに含めますが、このライブラリに含まれている機能を使って以下のように実装します。

<ul>
  <li><span tabindex="0" on="tap:pagesection-1.scrollTo(duration=400, position=top)">ページ内リンク１</span></li>
  <li><span tabindex="0" on="tap:pagesection-2.scrollTo(duration=400, position=top)">ページ内リンク２</span></li>
  <li><span tabindex="0" on="tap:pagesection-3.scrollTo(duration=400, position=top)">ページ内リンク３</span></li>
</ul>

<div id="pagesection-1" style="margin:600px 0px;">ページ内リンク１の内容</div>
<div id="pagesection-2" style="margin:600px 0px;">ページ内リンク２の内容</div>
<div id="pagesection-3" style="margin:600px 0px;">ページ内リンク３の内容</div>

動作確認はこちら。

ポイントはアンカータグ（<a>）を使うと通常のページ内リンクが実行されるので使わないで、spanタグで置き換えている点。

通常版はURLが切り替わるのでブラウザの履歴に残り、ブラウザの戻るや進むでページ内リンクが再実行されます。

かたやAMPライブラリを使って実現したものは、ブラウザの履歴に残らないので、ページ視聴後に何度もブラウザの戻るボタンを押さないといけないなんて事態が避けられます。

また、要素内の属性にちょろっと書くだけで、スクロール時の速度（duration）や位置（position）を指定することができるので、見やすくて便利ですね。