Как автоматически прокручивать страницу html?

Я пытаюсь запустить каждую страницу после домашней страницы около 500 пикселей вниз, похожую на этот сайт: http://unionstationdenver.com/

Вы заметите, что при просмотре страниц после домашней страницы вы автоматически прокручиваетесь без уведомления, но можете прокручивать вверх, чтобы снова воспользоваться расширенным слайдером.

Я играл с scrolledHeight, но я не думаю, что это то, что мне нужно????

В основном у меня есть раздел, посвященный всем моим страницам контента, но вы не сможете увидеть этот раздел, пока не прокрутите вверх. Любая помощь?

Ответы

Ответ 1

Вы можете использовать .scrollIntoView() для этого. Это приведет к созданию определенного элемента в окне просмотра.

Пример:

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

Демо: 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:

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

CSS

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

#bottom {
    border: 1px solid red;
}

Ответ 2

Для достижения этой цели вы можете использовать два разных метода.

Первый - с javascript: установите свойство scrollTop прокручиваемого элемента (например, document.body.scrollTop = 1000;).

Второй параметр указывает ссылку на конкретный идентификатор на странице, например.

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

Затем, если на целевой странице будет указан этот идентификатор, страница будет прокручиваться автоматически.

Ответ 3

Используйте document.scrollTop, чтобы изменить положение документа. Установите scrollTop для document, равный bottom в разделе, посвященном вашему сайту.

Ответ 4

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>