jQuery点击锚点滚动至Div失效，报Uncaught TypeError错误求助

嘿，我来帮你搞定这个滚动报错的问题～你遇到的Uncaught TypeError: Cannot read property 'top' of undefined，本质是jQuery找不到你要滚动到的目标元素，导致offset()返回了undefined。下面给你几个具体的排查和解决办法：

1. 先确保DOM加载完成再绑定事件 #

很大概率是你的代码在页面元素还没渲染完就跑了，导致找不到.down或者#section1。把代码包进$(document).ready()里就行，这样能保证所有DOM元素都加载好再执行：

$(document).ready(function() {
  $(".down").click(function(e) {
    // 先阻止浏览器默认的锚点跳转行为，不然平滑滚动会被打断
    e.preventDefault();
    const target = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(target).offset().top
    }, 1500);
  });
});

2. 检查元素是否真的存在 #

• 仔细核对#section1这个div的ID有没有拼写错误（比如大小写、多打了符号），确保它确实在HTML里
• 检查.down锚点的href属性是不是准确写了#section1，有没有多余的空格或者错误字符

3. 确认jQuery已经正确引入 #

如果页面没加载jQuery，那所有jQuery代码都是白搭。你可以打开浏览器控制台，输入$或者jQuery，如果返回一个函数，说明加载成功；要是报错，就得在你的代码前先引入jQuery：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

（用官方CDN或者本地的jQuery文件都行）

4. 额外优化：加个元素存在判断 #

为了避免以后再踩类似的坑，可以加个判断，确保目标元素存在再执行滚动动画：

$(document).ready(function() {
  $(".down").click(function(e) {
    e.preventDefault();
    const targetSelector = $(this).attr('href');
    const targetElement = $(targetSelector);
    // 判断目标元素是否存在
    if(targetElement.length > 0) {
      $('html, body').animate({
        scrollTop: targetElement.offset().top
      }, 1500);
    } else {
      console.log('找不到目标元素哦：', targetSelector);
    }
  });
});

最后再核对下你的HTML结构，确保顺序是对的：

<a class="down" href="#section1">点击滚动到Section1</a>
<div id="section1"> SECTION1 </div>
<!-- 先引入jQuery，再写你的脚本 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 上面的jQuery代码
</script>

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