AMP

2020.09.01

AMP対応｜スクロールで出現するスムーススクロールのページトップボタン

この記事は1329日前に投稿されたものです。

よく見るスクロールするとページトップボタンが画面下部にヌーっと現れるアレです。
だいたいはjavascriptで設置しているかと思いますが、javascript（公式以外の）が使えないAMPページでは、amp-position-observertとamp-animationを使います。

scrollToでスムーススクロールのボタンを作る

<p id="page-top">
  <button on="tap:header.scrollTo('duration' = 200)">ページトップへ</button>
</p>

aタグでも使用できますが、href="#アンカー"は使用しないようにしましょう。hrefで移動してしまうのでスクロールしません。僕はこれに気付かず、ちょっとはまりました・・・。そりゃそうだ。

オプション durationとposition

duration(省略可)
アンカーまで何ミリ秒でスクロールさせるか指定できます。デフォルトは「500ミリ秒以下のスクロールの差分に対する量が使用されます。」
例：duration=200
position(省略可)
移動先の要素のどこに移動するかです。例えば、ヘッダーの上辺、下辺、真ん中といった感じ。デフォルトではtopです。
例：position=top/position=center/position=bottom

ライブラリの読み込み

amp-position-observerの読み込み

<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>

amp-animationの読み込み

<script async custom-element="amp-animation" src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

WordPressのAMPプラグインを使用しているなら勝手に読み込まれてます。

ターゲットamp-position-observerを配置

AMPの場合は、amp-position-observerをトリガにして、アクション（イベント発生）させるという流れです。つまりamp-position-observerを上から300pxの位置に配置しておけば、実質「300pxスクロールでボタンを表示」と同じことができます。見出しなどのターゲットになる要素があるならそこに記述すればいいですが、そうじゃない場合はdivで括ってcssで配置してやれば、どこに記述しても問題ないです。

html

<div class="anim-target">
  <amp-position-observer on="enter:hideButton.start; exit:showButton.start" layout="nodisplay"></amp-position-observer>
</div>

amp-position-observerが画面内に表示されたら「hideButton」を開始、消えたら「showButton」を開始、という内容です。

css

#page-top { visibility : hidden; }
.anim-target { position : absolute ; top : 300px; }

#page-topを非表示にしているのは、ページを開いたら一瞬ボタンが表示されるのを防ぐためです。

amp-animationでアニメーションの設定

amp-position-observerをトリガにして実行するイベント（アニメーション）の設定です。<body>直下に記述。

showButton : ボタンをフェードイン

<amp-animation id="showButton" layout="nodisplay">
<script type="application/json">{
    "duration": "200ms",
    "fill": "both",
    "iterations": "1",
    "direction": "alternate",
    "animations": [
        {
        "selector": "#page-top",
        "keyframes": [
            { "opacity": "1", "visibility": "visible" }
        ]}
]}
</script>
</amp-animation>

hideButton : ボタンをフェードアウト

<amp-animation id="hideButton" layout="nodisplay">
<script type="application/json">{
    "duration": "200ms",
    "fill": "both",
    "iterations": "1",
    "direction": "alternate",
    "animations": [
        {
        "selector": "#page-top",
        "keyframes": [
            { "opacity": "0", "visibility": "hidden" }
        ]}
]}
</script>
</amp-animation>

まとめ

AMP専用のコンポーネントなんで導入がすごく簡単で楽。コピペですんなり実装できますね。公式サイトには他のコンポーネントのデモも結構あります。

公式サイトのデモ

Examples：Scroll to top