メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web クリエイター

はじめに

「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 つのオプションが用意されています。

duration

1 つ目のオプションが、duration です。アンカーまでの移動にかかる時間を指定します。

デフォルトの値は 500 (500ms = 0.5 秒)です。0.5 秒をかけて、アンカーまでスクロールで移動します。

任意の値に変更できます。

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

position

2 つ目のオプションが、position です。スクロール後のアンカーの位置を指定します。

デフォルトの値は top です。center または bottom を指定すれば、位置を変更できます。

デフォルトの top であれば、スクロール後にアンカーは画面上に表示されます。実際の動作はこちら。赤字の position が top が移動先のアンカーです。

center にすると、アンカーは画面中央に表示されます。

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

動作はこうなります。赤字の position が center がアンカーです。

bottom を指定すると、アンカーは画面下に表示されます。

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

動作はこうなります。赤字の position が bottom がアンカーです。

2 つのオプションを同時に指定

durationposition の 2 つのオプションは、同時に指定できます。

<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 属性で共通です。

フォローする