Thêm nút Quay lại đầu trang trên các trang dài

Nếu có trang dài và yêu cầu cuộn nhiều, bạn có thể thêm nút Back to the top (Quay lại đầu trang) vào chủ đề.

Ví dụ quay lại đầu trang

Tạo đoạn mã quay lại đầu trang

  1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.

  2. Đặt tên cho đoạn mã back-to-the-top, sau đó nhấp vào Tạo đoạn mã. Tệp đoạn mã sẽ mở trong trình chỉnh sửa mã.

  3. Dán mã sau vào tệp back-to-the-top mới tạo:

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>
  1. Nhấp vào Save (Lưu).

Thêm đoạn mã

  1. Trong thư mục Bố cục, mở tệp theme.liquid.

  2. Cuộn đến cuối tệp. Dán mã này ngay phía trên thẻ có kết thúc là </body>:

{% render 'back-to-the-top' %}
Your code should look like this:

![Back to top include snippet](/manual/customize/back-to-top-include-snippet.png)]
  1. Nhấp vào Save (Lưu).

Định cấu hình nút quay lại đầu trang (không bắt buộc)

Để tùy chỉnh nút quay lại đầu trang, nhấp vào đây và xem những dòng đầu tiên của đoạn mã.

  • Để thay đổi vị trí nút cân đối với phía cuối của trình duyệt, hãy chỉnh sửa giá trị position_from_bottom:
{% assign position_from_bottom = '4em' %}
  • Để thay đổi khoảng cách mà khách hàng cần cuộn xuống trước khi thấy nút, hãy chỉnh sửa giá trị vertical_offset_for_trigger:
{% assign vertical_offset_for_trigger = 300 %}

Cửa hàng demo

Truy cập cửa hàng demo để xem ví dụ về tùy chỉnh này.

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí