javascript - 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。我尝试了很多方法，但都失败了，也没有找到任何可以正常工作的方法。

谢谢

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
});

Answer 2

在代码末尾使用它

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

请注意，这些height:100%;是错误的。

Answer 3

你可以使用

window.location.hash = '#second';

这将设置焦点。我会让你在计时器解决方案上做一些工作。

此外，我不鼓励任何强迫用户专注于特定 div 的行为。这不是一个很好的 UX 实践，可能会导致用户离开您的网站，尤其是因为他们可能不理解页面向上滚动的原因。

Answer 4

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

Answer 5

将 HTML 添加到 zzzzBov 脚本中的这一行，使其在 FF 中正常工作：

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