Javascript 如何自动向下滚动一个html页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8773921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to automatically scroll down a html page?
提问by Hambone
I'm trying to start each page after the homepage about 500px down, similar to this website: http://unionstationdenver.com/
我试图在主页大约 500px 后开始每个页面，类似于这个网站：http: //unionstationdenver.com/
You'll notice when viewing pages after the homepage, you're automatically scrolled down without notice but you can than scroll up to revel the featured slider again.
您会注意到在主页之后查看页面时，您会自动向下滚动而不通知，但您可以向上滚动以再次陶醉特色滑块。
I've played with scrolledHeight but I dont think that is what I need????
我玩过 scrolledHeight 但我认为这不是我需要的？？？
Basically I have a featured section that is on top of all my content pages, but you shouldn't be able to see this section until you scroll up. Any help?
基本上，我有一个位于我所有内容页面顶部的特色部分，但是在向上滚动之前，您应该无法看到该部分。有什么帮助吗？
回答by ThinkingStiff
You can use .scrollIntoView()for this. It will bring a specific element into the viewport.
您可以.scrollIntoView()为此使用。它会将特定元素带入视口。
Example:
例子：
document.getElementById( 'bottom' ).scrollIntoView();
Demo: http://jsfiddle.net/ThinkingStiff/DG8yR/
演示：http: //jsfiddle.net/ThinkingStiff/DG8yR/
Script:
脚本：
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
HTML:
HTML：
<div id="top">top</div>
<div id="bottom">bottom</div>
CSS:
CSS：
#top {
border: 1px solid black;
height: 3000px;
}
#bottom {
border: 1px solid red;
}
回答by MohitGhodasara
here is the example using Pure JavaScript
这是使用纯 JavaScript 的示例
function scrollpage() {
function f()
{
window.scrollTo(0,i);
if(status==0) {
i=i+40;
if(i>=Height){ status=1; }
} else {
i=i-40;
if(i<=1){ status=0; } // if you don't want continue scroll then remove this line
}
setTimeout( f, 0.01 );
}f();
}
var Height=document.documentElement.scrollHeight;
var i=1,j=Height,status=0;
scrollpage();
</script><style type="text/css">
#top { border: 1px solid black; height: 20000px; }
#bottom { border: 1px solid red; }
</style><div id="top">top</div>
<div id="bottom">bottom</div>回答by Luca
You can use two different techniques to achieve this.
您可以使用两种不同的技术来实现这一点。
The first one is with javascript: set the scrollTop property of the scrollable element (e.g. document.body.scrollTop = 1000;).
第一个是使用 javascript：设置可滚动元素的 scrollTop 属性（例如document.body.scrollTop = 1000;）。
The second is setting the link to point to a specific id in the page e.g.
第二个是将链接设置为指向页面中的特定 id，例如
<a href="mypage.html#sectionOne">section one</a>
Then if in your target page you'll have that ID the page will be scrolled automatically.
然后，如果在您的目标页面中，您将拥有该 ID，该页面将自动滚动。
回答by Sean H Jenkins
Use document.scrollTopto change the position of the document. Set the scrollTopof the documentequal to the bottomof the featured section of your site
使用document.scrollTop来改变文件的位置。设置scrollTop的的document等于bottom你的网站的特色部分的
