AMP教學-點擊按鈕滑動回到頂部

在製作網頁的時候我們常常會使用到製作一個回頂部的按鈕，讓使用者可以快速回到頭部，避免滑了很長的頁面後難以捲動回到頭部。這樣的效果在平常可能是使用jQuery或JavaScript之類的來達成滑動捲回頭部，但AMP禁止使用JavaScript，因此推出了一些可做動畫的一些元件與範例，讓開發者有機會製作這類的動畫效果

目的：一開始進入畫面時 go top的按鈕隱藏，往下滑動視窗時出現按鈕，點擊按鈕後滑動回頂部，回到頂部後按鈕再度隱藏。

【回到頂部範例】

以下就參考上述的完整示範來解說，在amp中將會需要使用這兩個套件amp-position-observer 、amp-animation 以及amp中的動作語法

【amp-position-observer】
用於監視指定元素，並且讓其元素可以和其他AMP元件一起使用，此元件必須要和其他元件一起使用才有作用，單獨不會執行任何動作，常見的就是觸發 amp-animation。
amp-position-observer 可指定觸發時機，像是開始動畫、動畫中的位置、暫停動畫等等，同時也能設定觸發距離。
例如當用戶滾動頁面時，畫面上有物件逐漸出現動作，例如網頁中的時鐘的時針旋轉。

需崁入語法

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

寫法範例

 <h3 class="target">
<a class="target-anchor" id="top"></a>
This is the target.
<amp-position-observer
on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</h3>

語法說明
此段是配合amp-animation使用，amp-position-observer 放在h3裡面，代表視窗有看到這段h3時回到頂部的按鈕隱藏，當畫面下滑看不見h3時則讓按鈕顯示。

這個範例裡面的 on="enter:hideAnim.start; exit:showAnim.start" ，enter代表觸發按鈕隱藏hideAnim 開始，exit代表按鈕觸發隱藏結束。
等於在畫面一開始載入(enter)時回頭部的按鈕是隱藏的，當下滑(exit)時才會逐漸浮現，觸發顯示的按鈕，因此在此項範例中，amp-position-observer是一個讓按鈕隱藏和出現的控制端。

而點擊按鈕後的滾動的效果是要使用amp裡的動作語法

 <button id="scrollToTopButton"
on="tap:top.scrollTo(duration=200)"
class="scrollToTop">top</button>

on="tap:top.scrollTo(duration=200)"
上述語法為使用200毫秒平滑移動到頂部
.scrollTo　使用平滑動畫將元素滾動到指定位置中。
duration是可選的。以毫秒為單位指定動畫的長度。如果未指定，則使用相對於低於或等於500毫秒的滾動差異的量。
position是可選的，其中之一top，center 或bottom（默認top），滾動後指定元素相對於視窗的位置。

【amp-animation】
動畫屬性，利用JSON來放入動畫設定，如秒數、時間屬性(動畫曲線)、關鍵影格(keyframe)、效果、延遲、不透明度等等....
其可使用屬性和動畫眾多，僅以此次顯示和隱藏兩種動畫語法解說

同樣需崁入js語法

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

範例語法:

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

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

語法解釋

duration:動畫執行時間
fill：動畫填滿之意(?) 預設值為none, "forwards"(前進), "backwards"(後退), "both"(兩者), "auto"(自動)
terations：動畫重複次數，可能是數字或是 iterations(無限)
direction：動畫次序，一般為"normal"(正常), "reverse"(反向), "alternate"(交替) or "alternate-reverse"(交替反向)
animations ：動作指定
selector：選擇要動畫對象id "#scrollToTopButton", 這邊選的是要浮出的按鈕
keyframes：關鍵影格動作，opacity為透明度，visibility為顯示

以上為amp版本滑動回頭部的一種方式，amp還有提供各種常見的範例與組合可供參考，往後也會挑選一些實用的範例再加以解釋於此。

參考:amp scroll_to_top