Shopify 返回顶部按钮功能代码（支持所有主题 | 免费下载代码文件）

Shopify 返回顶部按钮功能代码（支持所有主题 | 免费下载代码文件）

$0.00 $20.00

为你的 Shopify 网站添加“Back to Top”功能，无需插件，免费可用，适配 Dawn、Sense、Horizon 等全部官方主题。

 

📌 功能介绍：

  • 向下滚动后自动显示返回按钮

  • 点击后页面平滑滚动到顶部

  • 响应式适配 PC 与手机端

  • 纯前端实现，无需安装 App

  • 全部官方免费主题均兼容 ✅

🎯 视频教程

视频展示

 

🎁获取完整代码：

<style>.back-to-top:hover{background-color:rgba(238,238,238,1)}.back-to-top{cursor: pointer;position:fixed!important;bottom:268px;right:30px;text-decoration:none;color:#8d8d8d;background-color:rgba(238,238,238,0.6);font-size:16px;padding:0;z-index:98;width:47px;height:47px;border-radius:50%;display:none;align-items:center;justify-content:center;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}#scrollToTop.back-to-top svg{width:17px;height:17px;position:relative;z-index:99;margin:0;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}.btn--circle-arrow:after{background:#e7e7e7}.btn:after{border-radius:50px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .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>
<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}}

let b=document.getElementById("scrollToTop");onscroll=()=>b.style.display=scrollY>300?"flex":"none";b.onclick=()=>scrollTo({top:0,behavior:"smooth"});

 

📁 文件结构：

shopify-back-to-top-button-code/
├── scroll-to-top.liquid    ←按钮结构
├── scroll-to-top.js          ← 控制逻辑（粘贴到 theme.liquid）

 

💻 安装步骤（简略说明）：

  1. 在theme.liquid文件的</body>上方添加代码 {%- render 'scroll-to-top' -%}

  2. 保存并预览，向下滚动时按钮将自动出现


❓ 常见问题 FAQ：

Q：支持哪些主题？
已在以下主题测试通过：Dawn、Sense、Horizon、Craft、Crave、Studio、Ride。

Q：按钮无法点击？
请确认 文件 是否放在插入在 </body> 前。

Q：按钮遮挡页面元素？
你可以修改 .back-to-top的 bottom 或 z-index 值，避免与客服组件冲突。

You may also like