Shopify二次开发-主题中添加“点击按钮返回到顶部”
在 Shopify 主题中添加“点击按钮返回到顶部” 功能，意味着在页面上方添加一个按钮，当用户滚动页面时，这个按钮会一直显示在页面底部，用户点击该按钮可以快速返回到页面顶部，提高用户体验。
在 Shopify 中添加“点击按钮返回到顶部”的好处
1.提高用户体验：用户在浏览网页时，通常需要滚动很长时间才能到达页面顶部，添加返回顶部按钮可以提高用户体验，方便用户快速返回顶部。
2. 提高网站可用性：网站添加返回顶部按钮可以提高其可用性和用户友好性，提高用户留存率和转化率。
3. 提高站内导航：如果网站页面比较长，用户需要通过滚动来回到顶部，这会降低站内导航的效率。添加返回顶部按钮可以让用户快速回到顶部，提高站内导航的效率。
4. 提高页面排名：页面加载速度是搜索引擎优化的重要因素之一，如果页面比较长，加载速度会比较慢，而返回顶部按钮可以缩短页面滚动时间，提高页面加载速度，从而提高页面排名。
因此，在 Shopify 主题中添加“点击按钮返回到顶部” 功能是非常有必要的。
如何在 Shopify 中添加“点击按钮返回到顶部”
步骤1：在资产/Assets内新建一个scroll-to-top.js文件
把下面代码复制到scroll-to-top.js文件内
// 获取回到顶部按钮元素
var scrollToTopBtn = document.getElementById("scrollToTop");
// 监听窗口滚动事件
window.addEventListener("scroll", function() {
// 获取当前滚动距离
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";
}
});
// 监听回到顶部按钮点击事件
scrollToTopBtn.addEventListener("click", function() {
// 平滑回到顶部
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
步骤2：在片段代码/Snippets内新建 scroll-to-top.liquid文件
把下面代码复制到scroll-to-top.liquid文件内
<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内添加 scroll-to-top
打开theme文件 => 在 上方添加代码 {%- render 'scroll-to-top' -%}
完成！
预览链接 https://de.ecoflow.com/
遇到问题请联系我们!
作者：shopify_develope https://www.bilibili.com/read/cv23636592 出处：bilibili
