Scroll Properties

<!DOCTYPE html>
<html>

<head>
	<style>
		#element {
			height: 200px;
			width: 350px;
			overflow: auto;
			background: green;
		}
		
		#content1 {
			margin: 500px;
			height: 100px;
			width: 1000px;
			background-color: white;
		}
		
		#content2 {
			margin: 500px;
			height: 50px;
			width: 1000px;
			background-color: grey;
		}
		
		#content3 {
			margin: 500px;
			height: 150px;
			width: 1000px;
			background-color: coral;
		}
	</style>
	<script>
		function myFunction1() {
			var e = document.getElementById("content1");
			e.scrollIntoView(false); // Makes the element
		}

		function myFunction2() {
			var e = document.getElementById("content2");
			e.scrollIntoView(true);
		}

		function myFunction3() {
			var e = document.getElementById("content3");
			e.scrollIntoView(); // Default is true
		}
	</script>
</head>

<body>
	<center>
		<h1 style="color: green">Close Tag</h1>
		<button onclick="myFunction1()">Scroll to element-1</button>
		<br>
		<button onclick="myFunction2()">Scroll to element-2</button>
		<br>
		<button onclick="myFunction3()">Scroll to element-3</button>
		<br>
		<br>

		<div id="element">
			<h2 style="color: white">
			Click on the scroll button to see
			that elements in a click.</h2>
			<div id="content1">
				<h2 align="left">Element-1</h2>
			</div>
			<div id="content2">
				<h2 align="left">Element-2</h2>
			</div>
			<div id="content3">
				<h2 align="left">Element-3</h2>
			</div>
		</div>
	</center>
</body>

</html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCg0KPGhlYWQ+DQoJPHN0eWxlPg0KCQkjZWxlbWVudCB7DQoJCQloZWlnaHQ6IDIwMHB4Ow0KCQkJd2lkdGg6IDM1MHB4Ow0KCQkJb3ZlcmZsb3c6IGF1dG87DQoJCQliYWNrZ3JvdW5kOiBncmVlbjsNCgkJfQ0KCQkNCgkJI2NvbnRlbnQxIHsNCgkJCW1hcmdpbjogNTAwcHg7DQoJCQloZWlnaHQ6IDEwMHB4Ow0KCQkJd2lkdGg6IDEwMDBweDsNCgkJCWJhY2tncm91bmQtY29sb3I6IHdoaXRlOw0KCQl9DQoJCQ0KCQkjY29udGVudDIgew0KCQkJbWFyZ2luOiA1MDBweDsNCgkJCWhlaWdodDogNTBweDsNCgkJCXdpZHRoOiAxMDAwcHg7DQoJCQliYWNrZ3JvdW5kLWNvbG9yOiBncmV5Ow0KCQl9DQoJCQ0KCQkjY29udGVudDMgew0KCQkJbWFyZ2luOiA1MDBweDsNCgkJCWhlaWdodDogMTUwcHg7DQoJCQl3aWR0aDogMTAwMHB4Ow0KCQkJYmFja2dyb3VuZC1jb2xvcjogY29yYWw7DQoJCX0NCgk8L3N0eWxlPg0KCTxzY3JpcHQ+DQoJCWZ1bmN0aW9uIG15RnVuY3Rpb24xKCkgew0KCQkJdmFyIGUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiY29udGVudDEiKTsNCgkJCWUuc2Nyb2xsSW50b1ZpZXcoZmFsc2UpOyAvLyBNYWtlcyB0aGUgZWxlbWVudA0KCQl9DQoNCgkJZnVuY3Rpb24gbXlGdW5jdGlvbjIoKSB7DQoJCQl2YXIgZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJjb250ZW50MiIpOw0KCQkJZS5zY3JvbGxJbnRvVmlldyh0cnVlKTsNCgkJfQ0KDQoJCWZ1bmN0aW9uIG15RnVuY3Rpb24zKCkgew0KCQkJdmFyIGUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiY29udGVudDMiKTsNCgkJCWUuc2Nyb2xsSW50b1ZpZXcoKTsgLy8gRGVmYXVsdCBpcyB0cnVlDQoJCX0NCgk8L3NjcmlwdD4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQoNCjxib2R5Pg0KCTxjZW50ZXI+DQoJCTxoMSBzdHlsZT0iY29sb3I6IGdyZWVuIj5DbG9zZSBUYWc8L2gxPg0KCQk8YnV0dG9uIG9uY2xpY2s9Im15RnVuY3Rpb24xKCkiPlNjcm9sbCB0byBlbGVtZW50LTE8L2J1dHRvbj4NCgkJPGJyPg0KCQk8YnV0dG9uIG9uY2xpY2s9Im15RnVuY3Rpb24yKCkiPlNjcm9sbCB0byBlbGVtZW50LTI8L2J1dHRvbj4NCgkJPGJyPg0KCQk8YnV0dG9uIG9uY2xpY2s9Im15RnVuY3Rpb24zKCkiPlNjcm9sbCB0byBlbGVtZW50LTM8L2J1dHRvbj4NCgkJPGJyPg0KCQk8YnI+DQoNCgkJPGRpdiBpZD0iZWxlbWVudCI+DQoJCQk8aDIgc3R5bGU9ImNvbG9yOiB3aGl0ZSI+DQoJCQlDbGljayBvbiB0aGUgc2Nyb2xsIGJ1dHRvbiB0byBzZWUNCgkJCXRoYXQgZWxlbWVudHMgaW4gYSBjbGljay48L2gyPg0KCQkJPGRpdiBpZD0iY29udGVudDEiPg0KCQkJCTxoMiBhbGlnbj0ibGVmdCI+RWxlbWVudC0xPC9oMj4NCgkJCTwvZGl2Pg0KCQkJPGRpdiBpZD0iY29udGVudDIiPg0KCQkJCTxoMiBhbGlnbj0ibGVmdCI+RWxlbWVudC0yPC9oMj4NCgkJCTwvZGl2Pg0KCQkJPGRpdiBpZD0iY29udGVudDMiPg0KCQkJCTxoMiBhbGlnbj0ibGVmdCI+RWxlbWVudC0zPC9oMj4NCgkJCTwvZGl2Pg0KCQk8L2Rpdj4NCgk8L2NlbnRlcj4NCjwvYm9keT4NCg0KPC9odG1sPg==