2020.09.01
AMP対応｜スクロールで出現するスムーススクロールのページトップボタン
よく見るスクロールするとページトップボタンが画面下部にヌーっと現れるアレです。
だいたいは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専用のコンポーネントなんで導入がすごく簡単で楽。コピペですんなり実装できますね。公式サイトには他のコンポーネントのデモも結構あります。
公式サイトのデモ
