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

AMPでスムーススクロールを実装する方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

AMP でも、ページ内アンカーにスクロールで移動するスムーススクロールは実装できます。

しかも、ものすごく簡単に。

その方法のご紹介です。

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 に向かってスクロールするよ!

文章で書くと、こんな感じでしょうか。

通常ページで書く JavaScript がバカらしく思えるほど、簡単です。

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

GIF がカクつく場合には、GIF の設定の SD を HD にご変更ください( PC でのみ変更可)。

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

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

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

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

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

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

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

ただ、<button> タグを使うのが 1 番良いと思います。

特に href="#" は、通常ページの onclick イベントと同様に、アクセシビリティに問題を抱える可能性があります。

div や span で on 属性を使う場合の注意点

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

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

指定がない場合には、AMP エラーが出ます。

これは scrollTo に限らず、全ての on 属性で共通です。


今回ご紹介した scrollTo を含むアクション、またはイベント、on 属性については、Actions and events in AMP で詳細な説明を確認できます。

2018 年中に、AMP でも JavaScript が使えるようになります(正式版なのか、ベータ版なのかは、執筆時点で不明)。

ただ、JavaScript が使えるようになっても、スムーススクロールを JavaScript で書く必要は基本的にないように思えます。

JavaScript での実装が必要なのは、Google 検索結果のスニペットを考慮し、<a> タグを使いたい目次に対してでしょうか。