求助：实现视频播放结束后自动滚动至<main>元素的JavaScript代码

嘿，我帮你找出了代码里的几个关键问题，咱们一步步来修复这个视频结束后自动滚动的功能：

问题分析 #

• 函数作用域错误：你把scrollToBtm函数定义在了setTimeout的回调内部，这导致在video.onended的回调里根本找不到这个函数，调用自然无效。
• 语法错误：代码末尾video[0].onended的回调函数后面多了一个多余的}，这会直接导致整个脚本解析失败，完全不执行。
• 冗余的延迟函数：videoScripting函数里的setTimeout是多余的，你本来就想在视频结束后立刻触发滚动，不需要额外延迟3秒，而且这个函数也从来没被调用过。
• HTML结构错误：<header>标签没有正确闭合，出现了重复的<header>标签，这会影响页面结构的正确性。

修正后的完整代码 #

<body>
  <header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      // 获取视频元素
      var video = $("#myVideo");
      
      // 定义滚动函数，放在全局作用域里
      var scrollToBtm = function() {
        $("html, body").animate({
          scrollTop: $('main').offset().top // 用offset()更可靠，position()是相对父元素的位置
        }, 4000);
      };
      
      // 绑定视频结束事件
      video[0].onended = function() {
        scrollToBtm(); // 视频结束后调用滚动函数
      };
    </script>
  </header>
  <video controls autoplay width="100%" height="100%" id="myVideo">
    <source src="imagens/DisneyIntroFullHD1080p.mp4" type="video/mp4">
  </video>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse" id="navbar10">
        <ul class="navbar-nav nav-fill w-100">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="//codeply.com">Awards</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><img class="w-25 h-25" src="imagens/Walt-Disney-logo.png"></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Characters</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Personality</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <main>
    <section class="container-fluid secao1">
      <article class="row align-self-center">
        <div class="col-3"></div>
        <img class="borda col-3 img-fluid" src="imagens/Walt_Disney_2.jpg">
        <div class="borda2 col-3 align-self-center">The most iconic animation persona in the world The men behind that little mouse that’s still part of children’s lifes nowadays The men behind the Disney empire. The men with a dream and the will to make it real.</div>
        <div class="col-3"></div>
      </article>
    </section>
  </main>
</body>

关键修改说明 #

1. 调整函数作用域：把scrollToBtm函数移到全局作用域，这样video.onended的回调就能正常调用它了。
2. 修复语法错误：移除了多余的闭合括号，确保脚本能正常解析。
3. 移除冗余代码：删掉了没用的videoScripting函数和内部的setTimeout，因为我们要在视频结束后立刻触发滚动，不需要额外延迟。
4. 替换position()为offset()：position()获取的是元素相对父元素的位置，而offset()获取的是元素相对于文档顶部的位置，用这个来计算滚动距离更准确。
5. 修复HTML结构：把重复的<header>标签改成</header>，确保页面结构正确。

这样修改后，视频播放结束后就会自动平滑滚动到<main>元素啦！

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