如何自动向下滚动html页面

how to automatically scroll down a html page?

本文关键字：html 页面 滚动 何自动      更新时间：2023-09-26

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

当你在主页后查看页面时，你会注意到，你会自动向下滚动，而不会发出通知，但你可以向上滚动，再次享受特色滑块。

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

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

您可以为此使用.scrollIntoView()。它将把一个特定的元素带入视口。

示例：

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

您可以使用两种不同的技术来实现这一点。

第一个是使用javascript：设置可滚动元素（例如document.body.scrollTop = 1000;）的scrollTop属性。

第二种是将链接设置为指向页面中的特定id，例如

<a href="mypage.html#sectionOne">section one</a>

然后，如果在您的目标页面中有该ID，页面将自动滚动。

这里是使用纯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>

使用document.scrollTop更改文档的位置。将document的scrollTop设置为等于站点的特色部分的bottom

<?php
        echo '<script type="text/javascript">document.scrollTop = 99999999;</script>';
        ob_flush();
        ob_end_flush();
        flush();
        ob_start();
?>

这对我很有用。

相关文章：