javascript - 如何自动向下滚动html页面？

Question

我试图在主页之后开始每个页面大约 500 像素，类似于这个网站:http://unionstationdenver.com/

您会注意到，在主页之后查看页面时，您会自动向下滚动而不会注意到，但您可以向上滚动以再次体验特色 slider 。

我玩过 scrolledHeight，但我认为这不是我需要的？？？？

基本上，我在所有内容页面的顶部都有一个特色部分，但在向上滚动之前您应该看不到这个部分。有帮助吗？

Answer 1

您可以为此使用.scrollIntoView()。它会将特定元素带入视口(viewport)。

例子:

document.getElementById( 'bottom' ).scrollIntoView();

演示:http://jsfiddle.net/ThinkingStiff/DG8yR/

脚本:

function top() {
    document.getElementById( 'top' ).scrollIntoView();    
};

function bottom() {
    document.getElementById( 'bottom' ).scrollIntoView();
    window.setTimeout( function () { top(); }, 2000 );
};

bottom();

HTML:

<div id="top">top</div>
<div id="bottom">bottom</div>

CSS:

#top {
    border: 1px solid black;
    height: 3000px;
}

#bottom {
    border: 1px solid red;
}