AMPではonclickイベント、外部のJavaScriptが使えないので、拡張コンポーネントを組み合わせて「ページトップに戻るボタン」を設置します。
本記事の内容で実現させること
- AMPページに「ページトップに戻るボタン」を設置すること
- ある程度スクロールしたら「ページトップに戻るボタン」を表示させること
- 「ページトップに戻るボタン」をクリックしたらアニメーションで移動すること
手順
拡張コンポーネントを読み込み
クリックした時のスクロールアニメーションと、特定の位置でボタンを表示させるためのイベント発生位置設定のために、「amp-animation」と「amp-position-observer」を<head>内に読み込みます。
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
WordPressのAMPプラグインなら、勝手に読み込んでくれるので読み込みの設定は不要です。
スクロールのターゲットを指定
ページトップに戻るボタンをクリックした時に移動する場所を指定します。
<body id="top">
ここではid名をtopにしましたが、headerでもなんでも大丈夫です。
ボタンの設定
ページトップに戻るボタンを設定。画面の右下に固定してしまうので、HTMLのどこに書いても大丈夫です。
<button id="page-top" on="tap:top.scrollTo">▲</button>
「tap:top.scrollTo」の部分で先ほど設定したスクロールのターゲットになる要素のid（ここではbodyタグに設定したtop）を指定します。
id指定の部分を変更すれば、ページ中の別の個所に移動させるようなボタンも設置可能です。
アニメーションの設定
selectorで先ほど設置したボタンのID名を設定。ここを間違えると動作しないのでご注意を。
<!--ボタンが表示される時のアニメーション-->
<amp-animation id="show-page-top" layout="nodisplay">
<script type="application/json">
{
"direction": "alternate",
"duration": "300ms",
"fill": "both",
"animations": [{
"selector": "#page-top",
"easing": "cubic-bezier(.4,0,.2,1)",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
<!--ボタンが非表示になる時のアニメーション-->
<amp-animation id="hide-page-top" layout="nodisplay">
<script type="application/json">
{
"direction": "alternate",
"duration": "300ms",
"fill": "both",
"animations": [{
"selector": "#page-top",
"easing": "cubic-bezier(.4,0,.2,1)",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
イベント発生エリアの設定
CSSを組み合わせて、amp-position-observerの表示領域外までスクロールするとボタンが表示され（show-page-topが実行される）、amp-position-observerの表示領域内まで戻るとボタンが非表示になるよう設定します。
<div id="scroll-target">
<amp-position-observer on="enter:hide-page-top.start; exit:show-page-top.start" layout="nodisplay"></amp-position-observer>
</div>
<style amp-custom>
#scroll-target{
position:absolute;
top:0;
width:100%;
height:500px;/*500px移動するとボタンが表示*/
}
/*ボタンの装飾*/
#page-top{
position:fixed;
bottom:50px;
right:100px;
background:#ff7800;
border:none;
padding:18px 20px;
border-radius:100px;
color:#fff;
visibility:hidden;
cursor:pointer;
}
</style>
amp-position-observerはCSSで表示位置を固定してしまうので、HTMLソースのどこに書いても大丈夫です。
こちらのデモページで実際の動作を確認してみてください。
井上 憲作
1975年生まれ。PCパーツの通販サイト管理者から、大手インターネット広告代理店にて、100社以上のコンサルティングやSEO施策に従事したのち、2018年に独立。趣味はスキューバダイビング。
