如何使用jquery/javascript在此视频样式中向下滚动到内容框？

<div class="video-container">
  <video src="video.mp4" autoplay loop muted></video>
  <div class="content">
    <!-- 内容框的内容 -->
  </div>
</div>

.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-container .content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 50%;
  background: #fff;
  padding: 20px;
  text-align: center;
}

$(document).ready(function() {
  // 监听滚动事件
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var videoHeight = $('.video-container').outerHeight();
    var contentHeight = $('.content').outerHeight();
    
    // 当滚动到视频底部时，向下滚动到内容框
    if (scrollTop >= videoHeight) {
      $('html, body').animate({
        scrollTop: videoHeight + contentHeight
      }, 500);
    }
  });
});