为你的 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>
FAQ
Shopify 返回顶部按钮应该先检查什么？
先在测试主题或测试页面中操作，并保留修改前版本和验证记录。不要同时改很多位置，先记录当前页面和数据，再处理最明确的问题。
需要马上安装新的 Shopify App 吗？
不一定。先判断主题现有功能、后台字段和少量代码能否解决。只有需要持续同步数据或复杂自动化时，再评估 App 的费用、脚本负担和卸载影响。
修改后怎么验证是否有效？
记录修改日期、页面 URL 和改动内容，再用实际页面、移动端、Google Search Console、Bing Webmaster Tools 或 GA4 检查结果。技术修改还要保留测试记录和回滚版本。
哪些情况不建议马上修改？
数据量太少、追踪没有配置、问题还没有复现，或者正在进行大型主题更新时，不建议一次性重做。先把问题拆开，确认影响范围后再改。
0 条评论