Shopify编辑器滚动代码报错：Uncaught TypeError: Cannot read property 'top' of undefined

这个报错我太熟了——Uncaught TypeError: Cannot read property 'top' of undefined本质就是你代码里试图访问一个不存在元素的top属性，刚好对应你说的“能向上滚动但无法从顶部滚动到底部”的情况：向上滚动的目标是页面顶部（top:0，不需要依赖DOM元素），而向下滚动的逻辑大概率是绑定了某个DOM元素，但这个元素没被正确找到。

问题根源排查 #

先回忆下你向下滚动的代码逻辑，是不是类似这样？

// 错误示例：假设你想滚动到某个底部元素，但元素不存在
const bottomElement = document.querySelector('.some-missing-class');
window.scrollTo({ top: bottomElement.offsetTop }); // 这里bottomElement是undefined，访问offsetTop就报错

常见的触发原因：

• 向下滚动的目标元素选择器写错了（类名/ID拼写错误、选择器层级不对）
• 代码在DOM完全加载前就执行了，导致元素还没渲染就被查询
• 底部元素是Shopify主题动态加载的（比如通过section、AJAX加载），初始DOM查询抓不到它

具体修复步骤 #

1. 先确认目标元素的选择器正确性 #

打开浏览器开发者工具（F12），在控制台输入你的选择器，比如：

document.querySelector('#your-bottom-target-id');

如果返回null或undefined，说明选择器错了——去页面里找到你要滚动到的底部元素，复制它正确的类名/ID。如果没有明确的目标元素，直接滚动到页面最底部即可（不需要依赖DOM元素）。

2. 确保代码在DOM加载完成后执行 #

Shopify主题经常会有动态渲染的内容，所以不要直接写裸的JS代码，把滚动逻辑绑定到theme:load事件（Shopify官方推荐）或者DOMContentLoaded事件里：

document.addEventListener('theme:load', function() {
  // 你的滚动按钮事件绑定、滚动逻辑全部放在这里
});

3. 增加元素存在性判断的兜底逻辑 #

在访问元素的top属性前，先检查元素是否存在，不存在就直接滚到页面最底部：

const scrollToBottomBtn = document.querySelector('#scroll-to-bottom');
scrollToBottomBtn.addEventListener('click', function() {
  // 尝试获取目标元素
  const bottomTarget = document.querySelector('#footer'); // 替换成你实际的选择器
  if (bottomTarget) {
    // 元素存在，滚动到它的位置
    window.scrollTo({
      top: bottomTarget.offsetTop,
      behavior: 'smooth' // 平滑滚动，可选
    });
  } else {
    // 元素不存在，直接滚到页面最底部
    console.warn('未找到底部目标元素，将滚动到页面底部');
    window.scrollTo({
      top: document.documentElement.scrollHeight || document.body.scrollHeight,
      behavior: 'smooth'
    });
  }
});

4. 处理动态加载的元素 #

如果你的底部元素是通过Shopify的section或AJAX动态加载的（比如产品列表加载更多后才出现），可以用事件委托绑定按钮，或者在内容加载完成后再初始化滚动逻辑。

完整可运行示例代码 #

把这段代码放到Shopify HTML编辑器里，替换成你自己的按钮ID和目标元素选择器即可：

<!-- 页面里的滚动按钮 -->
<button id="scroll-to-top">回到顶部</button>
<button id="scroll-to-bottom">滚动到底部</button>

<script>
// 用立即执行函数包裹，避免和主题JS冲突
(function() {
  document.addEventListener('theme:load', function() {
    // 回到顶部逻辑
    const topBtn = document.querySelector('#scroll-to-top');
    if (topBtn) {
      topBtn.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    }

    // 滚动到底部逻辑
    const bottomBtn = document.querySelector('#scroll-to-bottom');
    if (bottomBtn) {
      bottomBtn.addEventListener('click', function() {
        const bottomTarget = document.querySelector('#shopify-section-footer'); // 替换成你页面底部的section ID
        if (bottomTarget) {
          window.scrollTo({ top: bottomTarget.offsetTop, behavior: 'smooth' });
        } else {
          window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
        }
      });
    }
  });
})();
</script>

内容的提问来源于stack exchange，提问作者user8139445