Tạo nút lên đầu trang cho blogspot AMP - Back to top for Blogspot AMP

Tiện ích cuộn lên đầu trang(Back to top) cho blogspot hay blogspot AMP là rất hữu ích vì nó giúp khách truy cập dễ dàng quay trở lại sau khi đã cuộn xuống cuối màn hình.

Tạo nút lên đầu trang cho blogspot AMP tuy có khác với cách tạo nút cho blogspot thường về code nhưng cơ bản là giống nhau và không có gì quá phức tạp.

Nếu bạn có ý định sử dụng nút lên đầu trang cho blogspot AMP của mình thì hãy làm theo hướng dẫn sau.


Bước 1
Chèn mã javascript sau vào trước thẻ <head> hoặc &lt;/head&gt;&lt;!--<head/>--&gt;
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
</b:if>
Bước 2
Chèn đoạn CSS sau vào trong mẫu tại phần <style amp-custom='amp-custom'>
Tùy theo template mà phần css này có thể chia ra với các thẻ điều kiện như:
- Ngoài trang bài viết và trang tĩnh
- Chỉ ở trang bài viết
- Chỉ ở trang tĩnh...
Với nút Back to top này sử dụng cho tất cả các trang nên ta cần thêm đầy đủ vào các phần đã nói ở trên.
/* Scroll To Top */
.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:40px;height:40px;border-radius:100px;border:none;outline:0;background:#00aced;z-index:9999;bottom:0;right:0;position:fixed;opacity:0;visibility:hidden}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollToTop svg{width:31px;height:31px;vertical-align:middle;}
Bạn có thể thay đổi thông số bôi màu chanh theo ý mình.
Bước 3
Thêm code sau vào sau thẻ <body>
<div id='totop'/>
Bước 4
Thêm code sau vào trước thẻ </body> hoặc thẻ &lt;!--</body>--&gt;&lt;/body&gt;
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<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>
<div id="marker">
  <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start"
    layout="nodisplay">
  </amp-position-observer>
</div>
<button id="scrollToTopButton" title="Back To Top"
  on="tap:totop.scrollTo(duration=200)"
  class="scrollToTop">
<svg viewBox="0 0 24 24">
    <path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>
Tổng hợp
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji