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

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

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

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

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

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

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

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

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

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

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

文章で書くと、こんな感じでしょうか。通常ページで書く JavaScript がバカらしく思えるほど簡単です。

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

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 です。

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

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

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

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

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

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

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

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

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