smagch/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html {
  scroll-behavior: smooth;
  min-height: 200%;
}

a {
  display: block;
  background: #fff;
  padding: 4px;
}

div {
  height: 400px;
  width: 400px;
  padding: 4px;
  border: 2px solid black;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
</style>

</head>
<body>
<script>
let i = 0;
let colors = ['red', 'blue', 'green'];
prepend();
function prepend() {
  let element = document.createElement('div');
  i++;
  let color = colors[i%3];
  element.classList.add(color);
  document.body.insertBefore(element, document.body.firstChild);
  let top = document.body.scrollTop;
  document.body.scrollTop = top + element.getBoundingClientRect().height;
  setTimeout(prepend, 300);
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style media="screen">
	html {
	scroll-behavior: smooth;
	min-height: 200%;
	}

	a {
	display: block;
	background: #fff;
	padding: 4px;
	}

	div {
	height: 400px;
	width: 400px;
	padding: 4px;
	border: 2px solid black;
	}
	.red {
	background-color: red;
	}
	.blue {
	background-color: blue;
	}
	.green {
	background-color: green;
	}
	</style>

	</head>
	<body>
	<script>
	let i = 0;
	let colors = ['red', 'blue', 'green'];
	prepend();
	function prepend() {
	let element = document.createElement('div');
	i++;
	let color = colors[i%3];
	element.classList.add(color);
	document.body.insertBefore(element, document.body.firstChild);
	let top = document.body.scrollTop;
	document.body.scrollTop = top + element.getBoundingClientRect().height;
	setTimeout(prepend, 300);
	}
	</script>
	</body>
	</html>