5秒后自动滚动页面到一个div

Question

我是javascript的新手，现在我正在尝试做这件事情，就像标题一样，我有一个页面，页面顶部有一个与页面大小相同的div，并带有一个视频，在此之后还有几个类似这样的部分：

<div id="first" style="height:100%; width:100%"></div>
<section id="second" style="height:100%; width:100%"></section>
<section id="third" style="height:100%; width:100%"></section>

现在，我需要在页面加载后等待5秒钟，自动滚动页面到#second。 我尝试了许多方法，但都失败了，没有找到一个正常工作的方法。

谢谢。

- giovanni

---

我尝试了许多方法，哪些方法？展示一下你所拥有的。 - Matt Burland

如果用户在5秒钟之前自己开始滚动，会发生什么？你会打断他/她的滚动并开始你自己的吗？那可能会很烦人。 - Kevin B

通常，在经过x秒后滚动到特定部分会导致糟糕的用户体验，因为您不知道用户在这5秒钟内会做什么。也许他们不想观看视频，或者他们暂停了视频并开始滚动，只是在5秒后才到达目标位置。 - Huangism

其实也许用一个按钮会更好一些... - giovanni

Answer 1

我很慷慨，所以这次我只会给你代码。

$(window).load(function () {
    //normally you'd wait for document.ready, but you'd likely to want to wait
    //for images to load in case they reflow the page
    $('body').delay(5000) //wait 5 seconds
        .animate({
            //animate jQuery's custom "scrollTop" style
            //grab the value as the offset of #second from the top of the page
            'scrollTop': $('#second').offset().top
        }, 300); //animate over 300ms, change this to however long you want it to animate for
});

- zzzzBov

Answer 2

在你的代码结尾处使用此功能。

setTimeout(function(){window.location.hash = '#second';},5000);

注意：那些height:100%;是错误的。

- Mostafa Shahverdy

---

我尝试过像这样的东西... <script type="text/javascript" src="http://www.mysite.it/js/jquery.scrollTo-1.4.3.1.js"></script><script type="text/javascript">
$(...).scrollTo( #slider, 3000 ); </script> 没有任何作用，显然。 - giovanni

setInterval 会无限重复。 - zzzzBov

Answer 3

你可以使用

window.location.hash = '#second';

这将设置焦点。我会让你自己设计一个计时器解决方案。

此外，我不建议强制用户关注特定的div。这不是一个很好的UX实践，可能会导致用户离开你的网站，特别是因为他们可能不理解页面为什么会向上滚动。

- David L

Answer 4

$(function () {
    setTimeout(function () { goToSecondTab(); }, 5000);
    function goToSecondTab() {
        window.location.hash = '#second';
    }
});

- Tiago B

---

我把它放到了头部，但是没有任何改变..<script type="text/javascript">$(function(){ setTimeout(goToSecondTab(), 5000) function goToSecondTab(){ window.location.hash = '#second'; } });</script> - giovanni

你需要将一个函数传递给 setTimeout，不能是 undefined。 - Bergi

Answer 5

在zzzzBov的脚本中添加HTML以使其在FF中正常工作：

$('html, body').delay(5000) //wait 5 seconds

- Arroyo