Автоматическая прокрутка страницы вниз по таймеру

Автор Макс Пуля

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

Недавно передо мной встала задача автоматической загрузки сайта, прокрутки его до конца и загрузки другого сайта или следующей страницы. А потом цикл должен повторяться. Таким образом, у меня получилось 10 локальных HTML документов (страниц), которые последовательно загружаются. А последний возвращает на первый HTML документ.

Для загрузки следующего документа я использовал Meta тег:

<meta http-equiv="refresh" content="50;2.html">

Где content="50; - это время в секундах до загрузки следующего документа, 2.html" - это адрес документа, находящегося локально в папке на компьютере.

Мне нужно было, чтобы документ открывался локально в браузере, а с помощью iframe загружалась уже определенная страница сайта, который находится на хостинге. Iframe простой:

<iframe src="https://epicblog.net" width="100%" height="1300" scrolling="no"></iframe>

Этот айфрейм должен быть в диве id="block", ну и немного красоты, получаем:

<div style="height:700px;border:1px solid black;position:relative;overflow:hidden;">
<div id="block" style="left:0px;right:0px;top:0px;position:absolute;">
<iframe src="https://epicblog.net" width="100%" height="1300" scrolling="no"></iframe>
</div></div>

Также нужно добавить скрытую кнопку прокрутки страницы вниз, которая открывается в iframe:

<img src="/" alt="" onMouseover="move('block',-5)" onMouseout="clearTimeout(move.to)">

Ну и наконец скрипт:

<script>
function move(id,spd) {
var obj=document.getElementById(id);
var max=-obj.offsetHeight+obj.parentNode.offsetHeight;
var top=parseInt(obj.style.top);

if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },120); //скорость автоматической прокрутки вниз
}
else obj.style.top=(spd>0?0:max)+"px";
}
function go() { move('block',-5); }
setTimeout(go, 8000); //время через которое начнется автоматическая прокрутка вниз
</script>

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

Всем удачи и добра!

Опубликовано в Веб-разработки

Теги