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

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

「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> タグで scrollTo を使う場合は、href 属性と併用できません。

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

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

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。