Shopify 返回顶部按钮：所有主题适配方案

为你的 Shopify 网站添加一个“返回顶部”按钮，可以显著提升用户浏览体验，特别是在内容较长的页面（如首页、博客、商品页）中。

🧩 功能特点

• ✅ 平滑滚动，用户体验佳

• ✅ 支持所有官方主题（Dawn、Horizon、Sense 等）

• ✅ 响应式样式，自适应大小与位置

• ✅ 使用纯 HTML / CSS / JS，无需插件，无额外加载

📦 获取完整代码包

我们已为你整理好全部文件，包括：

• 按钮 HTML 结构

• 样式文件（支持 Dawn / Sense / Horizon 等）

• JavaScript 控制逻辑

• 快速安装说明文档（中文）

👉 点此前往产品页获取完整代码包（免费下载）

🚫 无需注册、无需付费，永久免费开放下载！

 

💡 常见问题 FAQ

Q：为什么点击按钮没有反应？
请检查脚本是否插入正确，并在 </body> 标签前。

Q：按钮遮挡了其他元素？
可在 CSS 中调整按钮 bottom 和 right 值，或使用媒体查询做移动端优化。

Q：支持哪些主题？
我们已在 Shopify 官方主题 Dawn、Sense、Craft、Crave、Ride、Studio、Horizon 中测试通过。

🔗 更多免费代码功能：

• 敬请期待

关注我们，解锁更多 Shopify 中文实用技巧：

🔗 shopi8.com – Shopify 中文代码功能专区

<style>
  .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;
    transition: all 0.3s;
  }
  .back-to-top:hover {
    background-color: rgba(238, 238, 238, 1);
  }
  #scrollToTop svg {
    width: 17px;
    height: 17px;
    transition: all 0.3s;
  }
  .btn--circle-arrow:after {
    background: #e7e7e7;
  }
  .btn:after {
    border-radius: 50px;
    transition: all 0.3s;
    height: 0;
    width: 0;
    left: 50%;
    top: 50%;
    content: '';
    position: absolute;
  }
  .btn:not([disabled]):hover:after {
    height: calc(100% + 2px);
    width: calc(100% + 2px);
    left: -1px;
    top: -1px;
  }
</style>
<div
  id="scrollToTop"
  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" viewBox="0 0 492 492">
    <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.388c-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.844l103.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.752c5.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>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const scrollBtn = document.getElementById("scrollToTop");
    window.addEventListener("scroll", () => {
      scrollBtn.style.display = window.scrollY > 300 ? "flex" : "none";
    });
    scrollBtn.addEventListener("click", () => {
      window.scrollTo({ top: 0, behavior: "smooth" });
    });
  });
</script>