点击按钮通过jQuery滚动到<main>标签无响应问题排查

看起来你写的滚动逻辑本身是没问题的，但点击没效果通常是几个常见的小问题导致的，我帮你梳理一下排查方向：

• 忘记引入jQuery库
  你的代码里用了$这个jQuery的快捷方式，但如果页面还没加载jQuery，浏览器会报错找不到$，自然不会执行滚动逻辑。要确保在你的自定义脚本之前引入jQuery库（不管是本地文件还是CDN资源）。

• DOM元素还没加载就执行了脚本
  如果你的脚本放在<head>里，或者页面顶部，那当代码执行时，#readMoreButton和#main这两个元素可能还没被浏览器渲染出来，导致jQuery找不到它们。解决办法有两个：

  1. 把脚本移到页面底部，</body>标签的前面；
  2. 把代码包裹在$(document).ready()里，确保DOM加载完成后再绑定事件：

     $(document).ready(function() {
       $("#readMoreButton").click(function () {
         $('html, body').animate({ scrollTop: $("#main").offset().top }, 1000); // 加个1秒的动画时长更直观
       });
     });
     

• 按钮的默认行为干扰了滚动
  如果你的#readMoreButton是一个提交按钮（比如<button type="submit">或者<input type="submit">），点击它会触发表单提交，页面会刷新，滚动效果还没显示就被刷新覆盖了。这种情况可以：

  1. 把按钮的type改成button：<button id="readMoreButton" type="button">阅读更多</button>；
  2. 或者在点击事件里阻止默认行为：

     $("#readMoreButton").click(function (e) {
       e.preventDefault(); // 阻止按钮的默认提交行为
       $('html, body').animate({ scrollTop: $("#main").offset().top }, 1000);
     });
     

• 元素选择器有误
  仔细检查#readMoreButton和#main的ID是否拼写正确，有没有大小写错误（ID是区分大小写的），或者页面里是否真的存在这两个元素。你可以打开浏览器控制台（F12），输入$("#readMoreButton").length和$("#main").length，如果返回0，说明选择器找不到对应的元素，需要修正ID或者选择器。

你可以按照上面的顺序逐一排查，应该就能解决问题啦！

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