AMP でスムーススクロールを実装できる scrollTo の使い方

はじめに

「AMP では、スムーススクロールができない。」と思われていないでしょうか。

AMP でも、ページ内アンカーにスクロールで移動するスムーススクロールを実装できます。しかも、とても簡単です。

使用するのは、AMP 特有のアクション scrollTo です。その使い方を紹介します。

尚、今回紹介する scrollTo を含むアクションやイベント、on 属性については、Actions and events - amp.dev で詳細な説明をご覧いただけます。

on 属性に scrollTo を指定

AMP では、onclick 属性が使えません。

しかし、AMP 特有の on 属性に、AMP 特有のイベント tap を組み合わせれば、クリックで発生するイベント処理を指定できます。

ここに、AMP 特有のアクション scrollTo を組み合わせるとスムーススクロールの完成です。

例えば、アンカーが sample の場合は、ボタンの HTML をこのように書きます。

<button on="tap:sample.scrollTo">クリックで移動</button>

on 属性に tap を指定し、その tap に移動先の id を指定します（今回は sample）。そして、scrollTo を指定すれば終わりです。

実際の動作はこちらです。赤字の sample が移動先です。

2 つのオプション

scrollTo には、2 つのオプションが用意されています。

<button on="tap:sample.scrollTo('duration' = 375)">クリックで移動</button>

<button on="tap:sample.scrollTo('position' = 'center')">クリックで移動</button>

<button on="tap:sample.scrollTo('position' = 'bottom')">クリックで移動</button>

<button on="tap:sample.scrollTo('duration' = 375, 'position' = 'center')">
  クリックで移動
</button>

イージングは変更不可

執筆時点の仕様では、イージングは変更できません。

尚、scrollTo のイージングは、ease-in です。

参考：amphtml/standard-actions-impl.js · ampproject/amphtml

ease-in とは、動き始めはゆっくりで、最後に速くなるアニメーションです。詳しくは、イージングの基本 | Web | Google Developers をご覧ください。

a タグで使う場合の注意点

<a> タグで scrollTo を使う場合は、href 属性と併用できません。

例えば、アンカーが sample の場合に、このように書くとスムーススクロールになりません。

<a href="#sample" on="tap:sample.scrollTo('position' = 'center')">
  クリックで移動
</a>

href 属性が効くため、スクロール移動にはなりません。オプションの position は効きますが、アニメーションがガタつきます。

href 属性を指定しない、または href="#" とすれば、スムーススクロールにはなります。

ただ、<button> タグを使うのが 1 番良いと思います。特に href="#" は、通常ページの onclick イベントと同様にアクセシビリティに問題を抱える可能性があります。

参考：<a>: アンカー要素 - HTML: HyperText Markup Language | MDN

button と a タグ以外で on 属性を使う場合の注意点

<div> や <amp-img> など <button> と <a> 以外で on 属性を使う場合は、role 属性と tabindex 属性の指定が必要です。

<div on="tap:sample.scrollTo" role="button" tabindex="0">クリックで移動</div>

指定がない場合は、AMP エラーが出ます。これは scrollTo に限らず、全ての on 属性で共通です。