jQuery scroll Method

 
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Learn jquery</title>
	<style>
		body{ font-family: arial; }
		h1{ font-size: 25px; }
		#box{
			width: 230px;
			height: 80px;
			background: lightgreen;
			padding: 10px;
			border: 1px solid #000;
			position: fixed;
			left: 20px;
			bottom: 30px;
		}
		
	</style>
</head>
<body style="width: 600px">
	<h1>jQuery scrollTop & scrollLeft Method</h1>
	<button id="scrolltopBtn">scrollTop</button>
	<button id="scrollleftBtn">scrollLeft</button>
	<br><br>
	<p>Lorem, ipsum dolor sit amet, consectetur adipisicing elit. Amet, nam, non! Numquam quas, sint cupiditate consectetur quam inventore odio hic harum placeat vitae error, suscipit quis minus aspernatur sunt distinctio, iusto eaque explicabo nobis ab laborum quos incidunt deserunt? Illo, nemo. Labore mollitia quasi nam ipsam odit, perferendis, nihil debitis iure facere, dolorum, quae eius esse expedita. Magni, nobis. Maxime corrupti mollitia sed beatae dicta aliquid eveniet consequuntur! Ex eos, non laudantium at ut mollitia error sunt voluptas debitis, earum, ab dolorum commodi? Repellendus nulla, debitis tempora illum tempore placeat autem cupiditate nostrum ipsam doloremque officiis aliquid architecto consequatur soluta blanditiis in error, nisi qui est explicabo nam inventore molestias. Fugiat deserunt non, dolore mollitia numquam distinctio sequi expedita exercitationem illo beatae minima blanditiis pariatur ex illum cum, quis doloremque aspernatur dolores voluptatem recusandae adipisci, dolor. Incidunt aliquid dolore at nisi odio aliquam enim labore repellat id ipsa eveniet adipisci dignissimos iure doloremque dolor, ex ea quos consectetur vero. Tempora adipisci asperiores quidem omnis ea architecto animi repellat, modi, tempore laborum illum ab, consequatur reiciendis aliquam distinctio odit provident rerum perspiciatis sequi, facilis similique sint? Architecto, obcaecati? Accusamus aperiam quam illo velit eveniet consequuntur rem praesentium ipsam in repudiandae, soluta excepturi laudantium libero. Quos, eius consequatur unde temporibus fuga eos ipsa sint quaerat nihil voluptate et esse similique reiciendis excepturi, reprehenderit quisquam illo commodi fugit earum, nam rem quae id repudiandae! Ipsa sit in, earum maiores iusto illo nihil quos quibusdam. Consectetur repudiandae amet praesentium itaque et saepe repellendus voluptate exercitationem, maiores eius asperiores eligendi aspernatur. Maxime illo sequi perferendis! Similique exercitationem eius nobis non harum dolor veniam voluptatem labore, ratione nam. Quasi temporibus aperiam consectetur voluptatem facere et illum quidem dicta veniam repellat nam nulla consequuntur esse quo pariatur, enim reprehenderit animi officia, totam accusantium voluptate cum ea amet facilis! Possimus debitis aperiam incidunt sunt quae temporibus. Ad aspernatur id illum tempora corporis quae possimus enim, illo praesentium quod a numquam mollitia alias sint quam, neque ipsa, qui est quo officiis iste. Numquam corrupti amet praesentium nam et ipsa repudiandae cupiditate pariatur alias, eos aperiam quisquam cumque ullam odit exercitationem totam doloribus tempore. Tenetur ad doloribus necessitatibus magni reprehenderit deserunt vero vitae, in facilis iure voluptate maiores soluta blanditiis fuga temporibus perspiciatis dolorum odit, aspernatur aliquid quibusdam. Dolor laborum ad praesentium voluptatem mollitia eaque hic delectus, molestias nobis, nostrum magni placeat fugit quis eum sequi ipsum neque iste nisi voluptatum quam, quos! Provident odit earum sed adipisci aliquid, voluptates ex aliquam accusantium? Est nemo temporibus quasi, non esse numquam harum dolorem suscipit nihil illo maiores error laboriosam repellat dolores illum quos consequatur. Facere ratione cupiditate corporis voluptate fugit quis tempora asperiores voluptates a quisquam, doloribus sequi ducimus consequatur, doloremque deserunt. Voluptate quas, ipsa, asperiores blanditiis eius autem dolorum debitis odit excepturi, cumque harum quibusdam sapiente, voluptas repellendus nesciunt nostrum. Debitis aut officia, facere odio, rerum, consectetur facilis vel repellendus ut velit temporibus, vero laborum deleniti saepe. Deserunt laboriosam est veniam. Sit accusamus, atque officia impedit earum, dolorem non ad nesciunt velit, laudantium suscipit dignissimos blanditiis ipsum omnis et commodi voluptate ea laborum alias tempora adipisci reiciendis. Ratione earum provident magni, veniam? Eum corporis facere distinctio maiores quis harum, quidem quae, sunt voluptatibus delectus eligendi modi est nisi assumenda nihil aliquid inventore optio illo. Molestiae, enim obcaecati sequi neque, vel debitis animi nobis laudantium suscipit at maiores. Adipisci accusamus recusandae perferendis amet! Nostrum dolorem quis sint asperiores ipsam deleniti, quos quibusdam itaque adipisci suscipit repudiandae. Quaerat sed enim ipsam nam minima animi numquam dicta impedit quisquam quia molestias ipsa nisi, neque vitae exercitationem cupiditate, consequuntur ratione tenetur amet blanditiis earum cumque est, pariatur totam. Rerum doloribus, amet accusamus hic voluptatibus blanditiis distinctio iure dolorem placeat iste alias itaque rem facilis officiis corporis error fugiat mollitia cupiditate est atque veritatis iusto, facere deserunt numquam corrupti. Fuga blanditiis molestiae in incidunt sapiente qui, sunt numquam eos sint quod dicta quidem vel voluptates fugit debitis, aliquid commodi quisquam minima pariatur nemo. Veritatis autem, nesciunt quo quam exercitationem voluptatum! Natus, voluptas necessitatibus ipsum adipisci, alias, dolores illum a veniam pariatur ducimus quo ipsam omnis totam quisquam numquam deleniti labore nisi, quam facilis! Maiores, veniam quae reiciendis non voluptatem odit minima, aut neque harum veritatis dicta perspiciatis aliquam magni sint? Doloribus facere nesciunt tempore, quia velit voluptate nobis vero reprehenderit dolorum dolor vitae nulla praesentium aperiam culpa minus nisi sed natus dolore voluptates veniam obcaecati. Cum illo impedit, dignissimos obcaecati temporibus optio neque ipsam quo porro, amet pariatur fugiat tenetur odio alias facere, fuga quam hic aliquid placeat. Sapiente atque officiis esse voluptatem, quam ipsa amet ipsam et aliquid obcaecati expedita, commodi voluptates perferendis doloremque assumenda. A fugit ad iure pariatur esse sint cumque molestias, porro modi impedit. Nesciunt vitae illo praesentium assumenda quas illum, sunt perferendis modi repellat quasi porro. Fuga sed exercitationem, porro, illum tenetur voluptatibus laborum doloremque saepe repellendus nisi eveniet dolore odio fugit ipsum! Autem, dolores, soluta aliquid veritatis perferendis quod? Sed, placeat impedit, quo ducimus ullam eum asperiores, voluptates quidem qui molestiae assumenda libero culpa fugit. Dolor, ratione excepturi eius! Corrupti neque, corporis quia incidunt maiores eos deleniti atque tempora voluptate deserunt molestias magnam. Nostrum, doloremque, minus. Veritatis officia culpa perferendis dolor odio odit maiores libero praesentium recusandae dolorum, sunt laborum esse non quia, perspiciatis facere excepturi consequatur totam. Voluptas, nesciunt, ullam delectus temporibus sint nam cumque tempore tempora aliquam expedita, voluptate laboriosam mollitia quaerat alias placeat non molestias dolor! Molestiae assumenda dolorem quae labore quis nulla distinctio praesentium odio, possimus adipisci incidunt quisquam. Similique reprehenderit doloribus quidem tenetur optio suscipit, numquam magnam dolores impedit soluta consequatur quam architecto! Ad alias laborum cumque aliquam recusandae maiores eum exercitationem, assumenda nesciunt placeat impedit aperiam quasi natus ab voluptatum quae sunt? Iure, reprehenderit! Libero doloribus nulla similique vel, atque, perferendis deleniti voluptatum adipisci ad obcaecati tempore laudantium veniam, ab molestiae culpa mollitia enim voluptate tempora veritatis consequuntur soluta provident. Atque, porro, minus ab tenetur consectetur aperiam, necessitatibus suscipit, tempora sapiente reiciendis itaque quibusdam aliquam repudiandae ea assumenda labore. Laborum, itaque totam maiores.</p>
	<div id="box"></div>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		/* jQuery scrollTop & scrollLeft Method*/
		$(document).ready(function(){
			//console.log($(window).scrollTop());
			//console.log($(window).scrollLeft());

			$(window).scroll(function(){
				$('#box').html("");
				$('#box').append("Top : " + $(window).scrollTop());
				$('#box').append("<br>Left : " + $(window).scrollLeft());
			});

			$('#scrolltopBtn').click(function(){
				$(window).scrollTop(200);
			});

			$('#scrollleftBtn').click(function(){
				$(window).scrollLeft(100);
			});
		});
	</script>
</body>
</html>