スクロールボタンの取り付け

ページ戻りボタンの取り付け手順 ampbyexample採用　

ページをスクロール後、上部位置の記事位置へ戻るボタンを取り付ける手順を
解説いたします。

スクリプトは、ampbyexampleで公開されているソースを使うのですが、現状では
トップページで正常作動..

申し訳ございません...
カテゴリ、エントリーでは、パソコンからは正常作動なのですが、モバイルでは..
なんか？動きが変？で、修正しましたが、トップPのデザインではなく...
BOXタイプです..

後ほど修正に努めますが、トップページでのみの対応...とカテゴリ　エントリはシリウス
デフォルトそのまま...でも良いかな？とも思います..

スキルある方は自己努力でお願いいたします...

では、取り付けに進みます..が、カテゴリ　エントリでは位置の違いも参照ください..

テンプレートHTML内から以下シリウスボタンコードを削除します..
<div id="pagetop"><a href="#">先頭へ戻る</a></div>

AMP HTML head内にスクリプトを配置
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

.scrollToTop {
color: #fafafa;
font-size: 1.4em;
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
width: 50px;
height: 50px;
border-radius: 100px;
border: none;
outline: none;
background: #E91E63;
z-index: 9999;
bottom: 10px;
right: 10px;
position: fixed;
opacity: 0;
visibility: hidden;
}
#marker {
position: absolute;
top: 100px;
width: 0px;
height: 0px;
}

次にbody内　header上にスクリプト及びmarker　scrollToTopButton
IDを貼り付ければ作業終了？です..
取付位置をご確認ください...　

ここから下をコピーし、箇所を確認し貼り付けください..

<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>

ここまで...

△は、テキストでも作用します

カテゴリ　エントリでは配置行に違いがあります

まずカテゴリーですが、
<div id="pagetop"><a href="#">先頭へ戻る</a></div>行と張り替えれば
よいのですが、モバイルでは左端表示となってしまいますので　<center>で
中央指示します..

エントリーは、囲み使わなくとも中央配置ですので<center>は不要..

配布ソースには、追加しておりますが、カテゴリー　エントリーHTMLのみ
お書き換えください..

スクロールボタンの取り付け｜AMP対応

スクロールボタンの取り付け｜AMP対応

ページ戻りボタンの取り付け手順 ampbyexample採用