在 Shopify 主題中添加“點擊按鈕返回到頂部” 功能，意味著在頁面上方添加一個按鈕，當(dāng)用戶滾動頁面時，這個按鈕會一直顯示在頁面底部，用戶點擊該按鈕可以快速返回到頁面頂部，提高用戶體驗。

在 Shopify 中添加“點擊按鈕返回到頂部”的好處

1.提高用戶體驗：用戶在瀏覽網(wǎng)頁時，通常需要滾動很長時間才能到達頁面頂部，添加返回頂部按鈕可以提高用戶體驗，方便用戶快速返回頂部。

2.? 提高網(wǎng)站可用性：網(wǎng)站添加返回頂部按鈕可以提高其可用性和用戶友好性，提高用戶留存率和轉(zhuǎn)化率。

3.? 提高站內(nèi)導(dǎo)航：如果網(wǎng)站頁面比較長，用戶需要通過滾動來回到頂部，這會降低站內(nèi)導(dǎo)航的效率。添加返回頂部按鈕可以讓用戶快速回到頂部，提高站內(nèi)導(dǎo)航的效率。

4.? 提高頁面排名：頁面加載速度是搜索引擎優(yōu)化的重要因素之一，如果頁面比較長，加載速度會比較慢，而返回頂部按鈕可以縮短頁面滾動時間，提高頁面加載速度，從而提高頁面排名。

因此，在 Shopify 主題中添加“點擊按鈕返回到頂部” 功能是非常有必要的。

如何在 Shopify 中添加“點擊按鈕返回到頂部”

步驟1：在資產(chǎn)/Assets內(nèi)新建一個scroll-to-top.js文件

把下面代碼復(fù)制到scroll-to-top.js文件內(nèi)

// 獲取回到頂部按鈕元素

var scrollToTopBtn = document.getElementById("scrollToTop");

// 監(jiān)聽窗口滾動事件

window.addEventListener("scroll", function() {

??

? // 獲取當(dāng)前滾動距離

? var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

? console.log('scrollTop', scrollTop)

? // 判斷是否滾動距離超過600

? if (scrollTop > 600) {

? ? // 顯示回到頂部按鈕

? ? scrollToTopBtn.style.display = "flex";

? } else {

? ? // 隱藏回到頂部按鈕

? ? scrollToTopBtn.style.display = "none";

? }

});

// 監(jiān)聽回到頂部按鈕點擊事件

scrollToTopBtn.addEventListener("click", function() {

? // 平滑回到頂部

? window.scrollTo({

? ? top: 0,

? ? behavior: "smooth"

? });

});

步驟2：在片段代碼/Snippets內(nèi)新建 scroll-to-top.liquid文件

把下面代碼復(fù)制到scroll-to-top.liquid文件內(nèi)

<style>? .back-to-top {? ? position: fixed !important;? ? bottom: 268px;? ? right: 30px;? ? text-decoration: none;? ? color: #8d8d8d;? ? background-color: #eee;? ? font-size: 16px;? ? padding: 0;? ? z-index: 98;? ? width: 47px;? ? height: 47px;? ? border-radius: 50%;? ? display: flex;? ? align-items: center;? ? justify-content: center; } #scrollToTop.back-to-top svg {? width: 17px;? height: 17px;? position: relative;? z-index: 99;? margin: 0;? ?-webkit-transition: all 0.3s;? -moz-transition: all 0.3s;? -o-transition: all 0.3s;? transition: all 0.3s; } .btn--circle-arrow:after {? background: #e7e7e7; } .btn:after {? border-radius: 50px;? -webkit-transition: all 0.3s;? -moz-transition: all 0.3s;? -o-transition: all 0.3s;? transition: all 0.3s;? height: 0;? left: 50%;? top: 50%;? width: 0;? content: '';? position: absolute; } .btn:not([disabled]):hover:after {? ? height: calc(100% + 2px);? ? left: -1px;? ? top: -1px;? ? width: calc(100% + 2px); } </style> <!-- scroll-btn --> <div id="scrollToTop" href="#" title="Back to the top" class="back-to-top btn btn--circle-arrow"> <svg class="icon icon--arrow-up" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 492 492" style="" xml:space="preserve">? <path d="M442.627,185.388L265.083,7.844C260.019,2.78,253.263,0,245.915,0c-7.204,0-13.956,2.78-19.02,7.844L49.347,185.388? ? c-10.488,10.492-10.488,27.568,0,38.052l16.12,16.128c5.064,5.06,11.82,7.844,19.028,7.844c7.204,0,14.192-2.784,19.252-7.844? ? l103.808-103.584v329.084c0,14.832,11.616,26.932,26.448,26.932h22.8c14.832,0,27.624-12.1,27.624-26.932V134.816l104.396,104.752? ? c5.06,5.06,11.636,7.844,18.844,7.844s13.864-2.784,18.932-7.844l16.072-16.128C453.163,212.952,453.123,195.88,442.627,185.388z"></path> </svg> </div> {{ 'scroll-to-top.js' | asset_url | script_tag }}

最后一步：在theme.liquid內(nèi)添加 scroll-to-top

打開theme文件 => 在 上方添加代碼? {%- render 'scroll-to-top' -%}

完成！

預(yù)覽鏈接 https://de.ecoflow.com/

遇到問題請聯(lián)系我們!

?作者：shopify_develope https://www.bilibili.com/read/cv23636592 出處：bilibili