เพิ่มปุ่มกลับไปยังด้านบนในหน้าแบบยาว

หน้านี้พิมพ์ขึ้นเมื่อ Jun 05, 2023 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top

หากคุณมีหน้าที่ยาวและต้องเลื่อนลงหลายครั้ง คุณสามารถเพิ่มปุ่มกลับไปยังด้านบนให้ธีมของคุณได้

สร้างส่วนย่อยของการย้อนกลับไปยังด้านบน

ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
ตั้งชื่อส่วนย่อย back-to-the-top จากนั้นคลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด
วางโค้ดต่อไปนี้ลงในไฟล์ back-to-the-top ที่สร้างขึ้นใหม่:

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

คลิกที่ “บันทึก”

ใส่ส่วนย่อยของคุณ

ในโฟลเดอร์เลย์เอาต์ ให้เปิดไฟล์ theme.liquid
เลื่อนไปที่ด้านล่างของไฟล์ แล้ววางโค้ดนี้เหนือแท็กปิด </body>

{% render 'back-to-the-top' %}

โค้ดของคุณควรจะมีลักษณะดังนี้:

คลิกที่ “บันทึก”

กำหนดค่าปุ่มกลับไปยังด้านบน (ไม่บังคับ)

หากต้องการปรับแต่งปุ่มกลับไปยังด้านบน ให้คลิกที่นี่และดูบรรทัดแรกของส่วนย่อยคุณ

หากต้องการเปลี่ยนตําแหน่งของปุ่มที่สัมพันธ์กับด้านล่างของเบราว์เซอร์ ให้แก้ไขค่า position_from_bottom

{% assign position_from_bottom = '4em' %}

หากต้องการเปลี่ยนระยะเวลาที่ลูกค้าต้องเลื่อนก่อนจะพบปุ่ม ให้แก้ไขค่า vertical_offset_for_trigger

{% assign vertical_offset_for_trigger = 300 %}

ร้านค้าตัวอย่าง

ไปที่ร้านค้าตัวอย่างเพื่อดูตัวอย่างของการปรับแต่งนี้

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี