需要使用javascript在视频端自动向下滚动的帮助吗_Javascript_Css_Html_Scroll

需要使用javascript在视频端自动向下滚动的帮助吗

javascript css html scroll

需要使用javascript在视频端自动向下滚动的帮助吗,javascript,css,html,scroll,Javascript,Css,Html,Scroll,我试图得到一个脚本，当我的视频结束时，网站会向下滚动到，但我无法让它工作。如果你能帮我一点忙，我将不胜感激。我制作了，但它完全不起作用，我不明白为什么。代码的主要部分当然只是一个示例。提前谢谢你的帮助 <body> <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script>

我试图得到一个脚本，当我的视频结束时，网站会向下滚动到

，但我无法让它工作。如果你能帮我一点忙，我将不胜感激。我制作了

，但它完全不起作用，我不明白为什么。
代码的主要部分当然只是一个示例。提前谢谢你的帮助

<body>

<header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
var video = $("#myVideo");
function videoScripting(){
    setTimeout(function () {
        var scrollToBtm = function() {
        $("html, body").animate({
        scrollTop: $('main').position().top // replace with whatever you want
        }, 4000);
        };
    }, 3000);
}
video[0].onended = function() {
  scrollToBtm(); // call function on video.onended if you want
};
}
</script>
<header>

<video controls autoplay width="100%" height="100%" id="myVideo">
        <source src="imagens/DisneyIntroFullHD1080p.mp4" type="video/mp4">

 </video>
</header>
<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>


var video=$（“#myVideo”）；
函数videoScripting（）{
setTimeout（函数（）{
var scrollToBtm=函数（）{
$（“html，body”）.animate({
scrollTop:$（'main'）.position（）.top//替换为您想要的任何内容
}, 4000);
};
}, 3000);
}
视频[0]。onended=函数（）{
scrollToBtm（）；//调用video.oned上的函数（如果需要）
};
}












世界上最具标志性的动画人物
那只小老鼠后面的男人现在仍然是孩子们生活的一部分
迪斯尼帝国背后的人。
那些有梦想和实现梦想的人。

试试这个：

var-video=$（“#myVideo”）；
var scrollToBtm=函数（）{
$（“html，body”）.animate({
scrollTop:$（'main'）.position（）.top//替换为您想要的任何内容
}, 4000);
};
视频[0]。onended=函数（）{
scrollToBtm（）；//调用video.oned上的函数（如果需要）
};













世界上最具标志性的动画人物
那只小老鼠后面的男人现在仍然是孩子们生活的一部分
迪斯尼帝国背后的人。
那些有梦想和实现梦想的人。
它可以滚动，但在视频的末尾，它滚动得太多，会直接滚动到结尾，而不是选择器或更新的我的答案。我替换为$（'main'）.position（）.top
，这是main的y位置。我添加了视频，这几乎很好。oned，但它没有等待视频结束，所以我缺少什么？我找到了它。错误出现在视频中。它应该是视频[0]。因为它是JQuery，所以被合并。它不工作。如果我将视频[0]放在你说的位置，它不会自动启动视频，最后也不会滚动