webuniverseio/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
      body {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 20px;
      }
      nav {
        position: fixed;
        right: 0;
        width: 300px;
      }
	</style>
</head>
<body>
<div>
	<h1 id="heading1">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda debitis deserunt ipsum necessitatibus neque possimus
		quis
		voluptas voluptatem! Architecto distinctio, doloremque doloribus, dolorum eligendi, eos excepturi inventore perferendis
		quidem
		sint sit veniam. Aliquam amet, architecto atque beatae distinctio earum eius esse eum expedita fuga illum laboriosam
		laborum,
		libero maxime natus omnis possimus qui quidem saepe totam unde vel vitae. Alias aliquam assumenda commodi consequuntur,
		corporis dolor dolore doloremque dolores eligendi enim, eum facere harum incidunt, ipsa iste laboriosam libero minima nemo
		non
		officia possimus ratione repellat repellendus veritatis vitae. Aliquam blanditiis natus sit. Cumque debitis dignissimos
		libero, mollitia quis voluptatum?
	</p>
	<h1 id="heading2">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequuntur dolorum expedita, magni nulla sequi totam velit.
		Architecto blanditiis consectetur dolore doloremque dolores impedit, inventore laboriosam molestiae nam nemo nostrum
		officiis
		placeat possimus sapiente sequi sunt totam vitae voluptates! A accusamus aliquam architecto assumenda cum debitis
		dignissimos
		distinctio dolores eos, ex exercitationem explicabo facere fuga fugit harum, illum ipsum itaque nesciunt officiis optio
		perferendis quaerat quasi quibusdam quis quod rem repudiandae saepe ullam ut vero! Accusantium cumque distinctio dolores
		eligendi enim hic natus nemo quos sunt, tenetur vitae voluptas. Adipisci, alias aliquid amet excepturi libero optio
		provident
		recusandae soluta totam?
	</p>
	<h1 id="heading3">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque et ex excepturi iure necessitatibus rem sit
		voluptas, voluptatibus voluptatum? Accusantium aliquam aspernatur aut blanditiis doloribus facere, impedit, maiores minima
		nobis perspiciatis placeat, totam velit vitae! Cum eligendi itaque iusto laboriosam temporibus! Accusantium ad alias
		architecto blanditiis deleniti deserunt distinctio dolore dolores earum eligendi eum facilis iste maiores maxime neque
		nobis,
		pariatur perferendis praesentium quae quam quia repudiandae rerum saepe, sed sequi temporibus unde velit veritatis
		voluptates,
		voluptatibus! Blanditiis dolore exercitationem fugiat maxime neque rem tempora tempore totam ut? Ab aliquam autem
		dignissimos
		illo, incidunt itaque nobis numquam placeat voluptate!
	</p>
	<h1 id="heading4">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias animi aperiam architecto assumenda consectetur
		doloremque
		dolorum eius eveniet excepturi exercitationem illo, impedit iure labore laudantium magnam molestiae nisi nostrum omnis
		quas
		quisquam quos repellendus reprehenderit sint, sunt tempora unde ut voluptate voluptatibus voluptatum. Aperiam beatae cum
		dicta
		dolorum eos eum eveniet ex facilis mollitia natus nisi odit officiis perferendis, quaerat quam quasi sequi suscipit
		voluptas?
		Beatae dignissimos et eum facere id incidunt, maxime neque nobis, perferendis placeat quaerat quisquam recusandae sit
		tempore
		ullam, veniam voluptas. Aliquam at eos, est facilis inventore itaque labore laborum odit perspiciatis quisquam vero
		voluptate.
	</p>
	<h1 id="heading5">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate neque quibusdam ut. Animi consequatur
		delectus
		laboriosam maxime nobis repellendus veniam voluptates? Alias aliquam aperiam aspernatur autem consequuntur cum cumque
		deserunt
		dignissimos dolores eligendi esse et ex facilis, fugit illum, ipsam iste iusto nemo praesentium quam qui quod
		reprehenderit
		sapiente sed sequi sint sit tempore temporibus totam ullam unde voluptate voluptatem voluptatum. Accusamus aliquam aliquid
		aperiam assumenda consequatur distinctio dolorem eaque, error est eveniet excepturi illo impedit ipsum laboriosam minima
		nam
		officia omnis quas quia ratione reiciendis rem repellat reprehenderit rerum sint tempora temporibus voluptatibus! Dolore
		impedit nobis repellendus sit!
	</p>
	<h1 id="heading6">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur deleniti, dicta distinctio dolore dolorem
		doloremque dolores ducimus earum est inventore, nisi nobis, numquam porro quis saepe similique tempore unde vero
		voluptatibus?
		Aliquam asperiores consectetur consequatur eos eum facere facilis impedit magnam neque nihil nisi officia officiis, omnis
		quam
		quia reiciendis rerum vel veniam! Animi consequuntur dignissimos doloribus dolorum earum ipsum magnam neque placeat
		tempore
		voluptatibus. Aperiam aspernatur at commodi, cum cumque delectus dolorem, dolores, earum ipsum iste iusto minus
		necessitatibus
		pariatur perferendis possimus quasi repudiandae soluta tempora! Assumenda beatae cum delectus et ex fugiat laudantium odit
		praesentium sapiente voluptate.
	</p>
	<h1 id="heading7">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cumque eaque explicabo iste itaque magni, molestias
		voluptatem? Ad adipisci aut blanditiis cupiditate distinctio est et eum eveniet fuga fugit laborum magnam mollitia neque
		omnis
		pariatur, placeat quae quaerat quas quod repellat sit velit veritatis voluptatem? Aliquam facilis fuga laudantium maiores
		sint
		veniam? Cupiditate dolorum eum ipsa neque obcaecati reiciendis tenetur veniam vitae. A earum enim excepturi, facilis
		mollitia
		nulla saepe tempore veniam. Amet architecto deserunt, dolorum error facilis in nostrum odit pariatur suscipit, temporibus
		vel
		veritatis. Ad blanditiis dolore earum eius excepturi, fugiat fugit molestias perspiciatis praesentium recusandae
		repudiandae
		soluta?
	</p>
	<h1 id="heading8">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid amet animi beatae blanditiis dignissimos,
		eligendi
		esse est ipsa itaque libero magni minus molestiae nam nobis nulla porro quibusdam quis quos rerum tempora velit
		voluptatibus.
		Aliquid beatae blanditiis consequatur cupiditate dignissimos dolor, doloremque eligendi eos eum ex harum hic ipsa iste
		magnam,
		maiores necessitatibus placeat quaerat quam qui quia quo ratione repellendus saepe similique soluta temporibus velit
		vitae.
		Animi aspernatur cumque eaque eveniet libero magnam nulla sint sit vel? Animi consequatur deleniti ducimus expedita
		facilis
		maiores nemo non perferendis sit voluptatum! Dignissimos eius ex molestiae officiis, quia reprehenderit velit. Assumenda!
	</p>
	<h1 id="heading9">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur delectus distinctio dolores est, expedita
		explicabo
		fugiat id inventore necessitatibus odio officiis possimus quae quaerat, quasi qui repellendus suscipit totam voluptas
		voluptatem? A aspernatur consectetur corporis culpa cupiditate delectus distinctio ducimus eveniet facere fuga fugiat
		fugit in
		ipsa ipsum iure magni maxime neque non numquam officiis optio, perferendis porro possimus qui, rem repellendus
		reprehenderit
		repudiandae sit suscipit temporibus unde veritatis voluptate voluptatem. Accusamus accusantium assumenda eaque eos id
		nobis
		odit pariatur quas quasi suscipit! Enim incidunt molestiae praesentium repellendus! Animi eaque eveniet illo, illum ipsum
		neque nihil optio praesentium quos.
	</p>
	<h1 id="heading10">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, commodi consequatur cupiditate deserunt esse
		facilis
		fugit harum hic illum inventore ipsum iure labore libero maiores modi mollitia natus nobis nostrum optio perspiciatis
		placeat
		provident quidem quis similique sint tempora voluptatem? Ad commodi eligendi explicabo ipsam obcaecati quasi quod
		reprehenderit soluta totam? Amet beatae doloremque doloribus enim eveniet ex fuga hic inventore ipsa ipsum iure labore
		magni
		modi, natus, nihil, officia omnis rem tempore totam vel. Accusantium aperiam dolor eius, est fugiat maiores quae
		similique. Ab
		asperiores at, commodi dolore, dolores esse exercitationem incidunt molestiae pariatur perferendis provident velit veniam.
	</p>
	<h1 id="heading11">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur deleniti doloremque, est harum impedit
		iste
		nostrum quae, quasi quisquam recusandae rem repellendus, tenetur totam vel? Beatae delectus ex fugit magnam officia omnis
		quas
		sint tenetur vitae voluptatibus. Amet beatae blanditiis consectetur consequatur corporis dolorem enim eum itaque
		laudantium
		maiores nobis, pariatur quaerat quis rerum saepe, totam unde? A ad consectetur ea facilis labore, libero numquam quos
		temporibus ut vitae. A animi beatae, consequuntur dicta dignissimos doloremque ea eius esse eveniet id ipsum iusto
		laboriosam
		laborum necessitatibus non optio, perferendis quae quaerat quasi qui rem sunt tempore velit veritatis voluptatum!
	</p>
	<h1 id="heading12">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis error necessitatibus quis tempore. Ad at enim est
		ipsum
		nam obcaecati quo ratione rerum temporibus voluptatibus. Deserunt, dicta eligendi excepturi facere labore libero neque
		perspiciatis quidem quisquam? Alias assumenda cumque distinctio error est eveniet expedita id ipsam officiis voluptatem!
		Aliquid eos illo illum itaque, iure maxime minima odio optio rerum veritatis! Dolor eos eveniet illo, molestias
		necessitatibus
		quod repellendus vel? A ab adipisci animi at delectus eligendi fugiat id in, inventore itaque libero maiores maxime
		molestiae
		neque nostrum numquam, obcaecati officiis qui quia, quidem quo quos soluta suscipit voluptatibus voluptatum?
	</p>
	<h1 id="heading13">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quae quam quibusdam quisquam quo. Aliquid aut consequatur
		dolores eveniet ex id incidunt, mollitia necessitatibus, quasi, quia quibusdam quo rem ullam unde vero! Autem blanditiis
		cumque delectus ducimus fugit illum impedit maiores neque perferendis, porro quae ullam voluptatem voluptatum? Amet
		asperiores
		dolores enim esse expedita facilis, incidunt inventore nisi praesentium provident quidem quo repellat suscipit tempora
		veritatis. Commodi, cupiditate, modi. Architecto assumenda at dolorem eos facere illum itaque magni, minus molestiae nam
		praesentium quia quibusdam reprehenderit sed sequi sint sunt tempore vero. Accusamus, aliquam dolore doloribus fugit ipsam
		veniam vitae? Culpa.
	</p>
	<h1 id="heading14">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cupiditate distinctio dolor dolore impedit non, possimus
		similique suscipit voluptates. Accusamus aperiam architecto asperiores beatae, blanditiis consectetur cum cupiditate
		debitis
		dignissimos dolor dolorum harum hic illum maxime neque nobis praesentium provident quibusdam recusandae saepe ut,
		veritatis
		vitae voluptas voluptatem voluptatum! Accusamus ad architecto cumque cupiditate nisi quasi voluptatibus? Adipisci, aliquam
		dignissimos ea eius esse facilis iusto maiores natus neque, provident suscipit ut vitae. Accusamus accusantium aliquid
		beatae
		consequuntur culpa deserunt dolores eaque earum eum illo illum ipsa iure laudantium mollitia nam quisquam, quos repellat
		saepe
		sapiente sit sunt tempora tenetur totam.
	</p>
	<h1 id="heading15">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur ducimus enim excepturi ipsum laboriosam modi nam
		nulla temporibus voluptate. Ab accusantium asperiores assumenda commodi consequatur cum cumque dicta dolor doloremque
		earum
		error esse ex excepturi expedita hic id in incidunt iure labore laboriosam mollitia, nemo nesciunt nisi numquam omnis,
		perferendis placeat praesentium quae quibusdam quis recusandae repellat sit sunt tempore ullam vitae voluptatibus? Fugiat
		iure
		ut voluptate? Aliquid animi assumenda dicta dignissimos ex facere illum laboriosam, non repudiandae sapiente? A aliquid
		blanditiis deleniti dignissimos est harum in labore maxime molestias, nihil, officiis pariatur quibusdam quisquam? Maxime
		minus placeat rem!
	</p>
	<h1 id="heading16">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci aliquam amet atque consectetur, consequuntur
		corporis dicta ea eligendi ex exercitationem explicabo fuga impedit, incidunt inventore magni minima nam nihil nulla
		obcaecati
		odio perspiciatis possimus quam quia rem repellat reprehenderit repudiandae rerum sed soluta tempora tenetur totam vel
		vero
		vitae, voluptates? Asperiores earum necessitatibus nulla odio perferendis placeat qui quia sed. Ad atque delectus dolorem
		est
		eum fugit illum in inventore ipsa molestias nam natus neque nesciunt nulla, pariatur provident quas quia quidem quo quos
		repellendus tempore voluptates? A dignissimos doloribus exercitationem incidunt laudantium obcaecati odio quidem.
		Repudiandae,
		voluptatibus.
	</p>
	<h1 id="heading17">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam obcaecati soluta unde veritatis? Autem
		corporis
		dicta fugiat obcaecati quam reprehenderit sapiente soluta? Ad, aliquid aperiam dolorum earum explicabo hic id illo in
		labore,
		molestias mollitia neque officiis sint tenetur totam! Corporis, cumque dignissimos eius ex iusto laboriosam magnam
		nesciunt
		odio odit officiis provident quasi quod reprehenderit repudiandae, sunt tempore temporibus vel. Adipisci aspernatur aut
		consequatur eius inventore iusto natus placeat quos sequi tempore! Debitis dolore enim, iure nostrum perspiciatis quaerat
		sunt. Adipisci autem dolor error molestiae nam nulla provident quis repellendus. At cumque id nemo quae sequi tempora,
		veniam.
	</p>
	<h1 id="heading18">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur fugiat hic nulla! Adipisci amet atque
		commodi
		cupiditate distinctio doloribus error expedita, harum labore laudantium minus nesciunt quaerat quasi sed ullam? Alias
		assumenda dolorem doloribus eos ex illum ipsam soluta tenetur ut. Adipisci aspernatur debitis distinctio expedita impedit
		ipsam iusto, magnam nisi officiis quod totam ut! Ab adipisci animi assumenda at aut beatae consequuntur corporis culpa
		dicta
		dolores dolorum eius expedita facilis fuga illum inventore iure laudantium minima minus modi nam nemo neque, nesciunt
		obcaecati officia praesentium quas quia quo rem repudiandae rerum sapiente tenetur totam vel veritatis vero voluptatem?
	</p>
	<h1 id="heading19">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolorem doloremque ea fugit, hic illum iste nostrum
		odio
		quaerat, ratione saepe similique veritatis, vero? Architecto at consectetur consequatur cum eligendi fugiat ipsam iure
		maxime
		nam necessitatibus obcaecati odit officia optio quod sunt temporibus, voluptatem. Aliquam, aut distinctio est eveniet iure
		magnam minus molestias neque officia quasi quos sint, ullam, velit! Adipisci animi beatae dolorem doloribus eum fuga
		fugit,
		harum illum in labore laborum nemo nihil omnis possimus provident quam quis quisquam repudiandae sequi sint sunt, suscipit
		temporibus tenetur totam velit vero voluptate voluptates! Aliquam dolorem eos incidunt quibusdam vitae voluptatem.
	</p>
	<h1 id="heading20">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, laborum sit? Aspernatur at autem doloremque in, iusto
		molestias neque quos tempore veniam voluptatum! Cum dolores, earum iure iusto quam reprehenderit veritatis voluptate.
		Doloremque itaque neque quo! Beatae id non odit provident quis quisquam recusandae repellendus reprehenderit sequi
		voluptate?
		Ad at aut consectetur culpa cum cumque eligendi error exercitationem inventore, ipsa labore minus modi nobis non porro
		praesentium quasi quidem quisquam, quos recusandae. Illum nesciunt sequi vero. Amet animi consequuntur debitis eaque enim
		eos
		harum ipsa ipsam iure laborum molestiae nulla obcaecati provident quae quos sed, tempora voluptatibus! Nesciunt, numquam,
		pariatur?
	</p>
</div>
<nav>
	<a href="#heading1">heading1</a><br>
	<a href="#heading2">heading2</a><br>
	<a href="#heading3">heading3</a><br>
	<a href="#heading4">heading4</a><br>
	<a href="#heading5">heading5</a><br>
	<a href="#heading6">heading6</a><br>
	<a href="#heading7">heading7</a><br>
	<a href="#heading8">heading8</a><br>
	<a href="#heading9">heading9</a><br>
	<a href="#heading10">heading10</a><br>
	<a href="#heading11">heading11</a><br>
	<a href="#heading12">heading12</a><br>
	<a href="#heading13">heading13</a><br>
	<a href="#heading14">heading14</a><br>
	<a href="#heading15">heading15</a><br>
	<a href="#heading16">heading16</a><br>
	<a href="#heading17">heading17</a><br>
	<a href="#heading18">heading18</a><br>
	<a href="#heading19">heading19</a><br>
	<a href="#heading20">heading20</a><br>
</nav>
<script>
  (function () {
    document.body.addEventListener('click', e => {
      if (e.target.matches('nav a')) {
        e.preventDefault()
        history.replaceState(null, null, e.target.href)
        //necessary to handle changed state
        window.dispatchEvent(new Event('hashchange'))
      }
    })

    window.addEventListener('hashchange', e => {
      alert(location.hash)
    })
  }());
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	body {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 20px;
	}
	nav {
	position: fixed;
	right: 0;
	width: 300px;
	}
	</style>
	</head>
	<body>
	<div>
	<h1 id="heading1">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda debitis deserunt ipsum necessitatibus neque possimus
	quis
	voluptas voluptatem! Architecto distinctio, doloremque doloribus, dolorum eligendi, eos excepturi inventore perferendis
	quidem
	sint sit veniam. Aliquam amet, architecto atque beatae distinctio earum eius esse eum expedita fuga illum laboriosam
	laborum,
	libero maxime natus omnis possimus qui quidem saepe totam unde vel vitae. Alias aliquam assumenda commodi consequuntur,
	corporis dolor dolore doloremque dolores eligendi enim, eum facere harum incidunt, ipsa iste laboriosam libero minima nemo
	non
	officia possimus ratione repellat repellendus veritatis vitae. Aliquam blanditiis natus sit. Cumque debitis dignissimos
	libero, mollitia quis voluptatum?
	</p>
	<h1 id="heading2">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequuntur dolorum expedita, magni nulla sequi totam velit.
	Architecto blanditiis consectetur dolore doloremque dolores impedit, inventore laboriosam molestiae nam nemo nostrum
	officiis
	placeat possimus sapiente sequi sunt totam vitae voluptates! A accusamus aliquam architecto assumenda cum debitis
	dignissimos
	distinctio dolores eos, ex exercitationem explicabo facere fuga fugit harum, illum ipsum itaque nesciunt officiis optio
	perferendis quaerat quasi quibusdam quis quod rem repudiandae saepe ullam ut vero! Accusantium cumque distinctio dolores
	eligendi enim hic natus nemo quos sunt, tenetur vitae voluptas. Adipisci, alias aliquid amet excepturi libero optio
	provident
	recusandae soluta totam?
	</p>
	<h1 id="heading3">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque et ex excepturi iure necessitatibus rem sit
	voluptas, voluptatibus voluptatum? Accusantium aliquam aspernatur aut blanditiis doloribus facere, impedit, maiores minima
	nobis perspiciatis placeat, totam velit vitae! Cum eligendi itaque iusto laboriosam temporibus! Accusantium ad alias
	architecto blanditiis deleniti deserunt distinctio dolore dolores earum eligendi eum facilis iste maiores maxime neque
	nobis,
	pariatur perferendis praesentium quae quam quia repudiandae rerum saepe, sed sequi temporibus unde velit veritatis
	voluptates,
	voluptatibus! Blanditiis dolore exercitationem fugiat maxime neque rem tempora tempore totam ut? Ab aliquam autem
	dignissimos
	illo, incidunt itaque nobis numquam placeat voluptate!
	</p>
	<h1 id="heading4">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias animi aperiam architecto assumenda consectetur
	doloremque
	dolorum eius eveniet excepturi exercitationem illo, impedit iure labore laudantium magnam molestiae nisi nostrum omnis
	quas
	quisquam quos repellendus reprehenderit sint, sunt tempora unde ut voluptate voluptatibus voluptatum. Aperiam beatae cum
	dicta
	dolorum eos eum eveniet ex facilis mollitia natus nisi odit officiis perferendis, quaerat quam quasi sequi suscipit
	voluptas?
	Beatae dignissimos et eum facere id incidunt, maxime neque nobis, perferendis placeat quaerat quisquam recusandae sit
	tempore
	ullam, veniam voluptas. Aliquam at eos, est facilis inventore itaque labore laborum odit perspiciatis quisquam vero
	voluptate.
	</p>
	<h1 id="heading5">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate neque quibusdam ut. Animi consequatur
	delectus
	laboriosam maxime nobis repellendus veniam voluptates? Alias aliquam aperiam aspernatur autem consequuntur cum cumque
	deserunt
	dignissimos dolores eligendi esse et ex facilis, fugit illum, ipsam iste iusto nemo praesentium quam qui quod
	reprehenderit
	sapiente sed sequi sint sit tempore temporibus totam ullam unde voluptate voluptatem voluptatum. Accusamus aliquam aliquid
	aperiam assumenda consequatur distinctio dolorem eaque, error est eveniet excepturi illo impedit ipsum laboriosam minima
	nam
	officia omnis quas quia ratione reiciendis rem repellat reprehenderit rerum sint tempora temporibus voluptatibus! Dolore
	impedit nobis repellendus sit!
	</p>
	<h1 id="heading6">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consectetur deleniti, dicta distinctio dolore dolorem
	doloremque dolores ducimus earum est inventore, nisi nobis, numquam porro quis saepe similique tempore unde vero
	voluptatibus?
	Aliquam asperiores consectetur consequatur eos eum facere facilis impedit magnam neque nihil nisi officia officiis, omnis
	quam
	quia reiciendis rerum vel veniam! Animi consequuntur dignissimos doloribus dolorum earum ipsum magnam neque placeat
	tempore
	voluptatibus. Aperiam aspernatur at commodi, cum cumque delectus dolorem, dolores, earum ipsum iste iusto minus
	necessitatibus
	pariatur perferendis possimus quasi repudiandae soluta tempora! Assumenda beatae cum delectus et ex fugiat laudantium odit
	praesentium sapiente voluptate.
	</p>
	<h1 id="heading7">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cumque eaque explicabo iste itaque magni, molestias
	voluptatem? Ad adipisci aut blanditiis cupiditate distinctio est et eum eveniet fuga fugit laborum magnam mollitia neque
	omnis
	pariatur, placeat quae quaerat quas quod repellat sit velit veritatis voluptatem? Aliquam facilis fuga laudantium maiores
	sint
	veniam? Cupiditate dolorum eum ipsa neque obcaecati reiciendis tenetur veniam vitae. A earum enim excepturi, facilis
	mollitia
	nulla saepe tempore veniam. Amet architecto deserunt, dolorum error facilis in nostrum odit pariatur suscipit, temporibus
	vel
	veritatis. Ad blanditiis dolore earum eius excepturi, fugiat fugit molestias perspiciatis praesentium recusandae
	repudiandae
	soluta?
	</p>
	<h1 id="heading8">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid amet animi beatae blanditiis dignissimos,
	eligendi
	esse est ipsa itaque libero magni minus molestiae nam nobis nulla porro quibusdam quis quos rerum tempora velit
	voluptatibus.
	Aliquid beatae blanditiis consequatur cupiditate dignissimos dolor, doloremque eligendi eos eum ex harum hic ipsa iste
	magnam,
	maiores necessitatibus placeat quaerat quam qui quia quo ratione repellendus saepe similique soluta temporibus velit
	vitae.
	Animi aspernatur cumque eaque eveniet libero magnam nulla sint sit vel? Animi consequatur deleniti ducimus expedita
	facilis
	maiores nemo non perferendis sit voluptatum! Dignissimos eius ex molestiae officiis, quia reprehenderit velit. Assumenda!
	</p>
	<h1 id="heading9">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur delectus distinctio dolores est, expedita
	explicabo
	fugiat id inventore necessitatibus odio officiis possimus quae quaerat, quasi qui repellendus suscipit totam voluptas
	voluptatem? A aspernatur consectetur corporis culpa cupiditate delectus distinctio ducimus eveniet facere fuga fugiat
	fugit in
	ipsa ipsum iure magni maxime neque non numquam officiis optio, perferendis porro possimus qui, rem repellendus
	reprehenderit
	repudiandae sit suscipit temporibus unde veritatis voluptate voluptatem. Accusamus accusantium assumenda eaque eos id
	nobis
	odit pariatur quas quasi suscipit! Enim incidunt molestiae praesentium repellendus! Animi eaque eveniet illo, illum ipsum
	neque nihil optio praesentium quos.
	</p>
	<h1 id="heading10">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, commodi consequatur cupiditate deserunt esse
	facilis
	fugit harum hic illum inventore ipsum iure labore libero maiores modi mollitia natus nobis nostrum optio perspiciatis
	placeat
	provident quidem quis similique sint tempora voluptatem? Ad commodi eligendi explicabo ipsam obcaecati quasi quod
	reprehenderit soluta totam? Amet beatae doloremque doloribus enim eveniet ex fuga hic inventore ipsa ipsum iure labore
	magni
	modi, natus, nihil, officia omnis rem tempore totam vel. Accusantium aperiam dolor eius, est fugiat maiores quae
	similique. Ab
	asperiores at, commodi dolore, dolores esse exercitationem incidunt molestiae pariatur perferendis provident velit veniam.
	</p>
	<h1 id="heading11">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur deleniti doloremque, est harum impedit
	iste
	nostrum quae, quasi quisquam recusandae rem repellendus, tenetur totam vel? Beatae delectus ex fugit magnam officia omnis
	quas
	sint tenetur vitae voluptatibus. Amet beatae blanditiis consectetur consequatur corporis dolorem enim eum itaque
	laudantium
	maiores nobis, pariatur quaerat quis rerum saepe, totam unde? A ad consectetur ea facilis labore, libero numquam quos
	temporibus ut vitae. A animi beatae, consequuntur dicta dignissimos doloremque ea eius esse eveniet id ipsum iusto
	laboriosam
	laborum necessitatibus non optio, perferendis quae quaerat quasi qui rem sunt tempore velit veritatis voluptatum!
	</p>
	<h1 id="heading12">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis error necessitatibus quis tempore. Ad at enim est
	ipsum
	nam obcaecati quo ratione rerum temporibus voluptatibus. Deserunt, dicta eligendi excepturi facere labore libero neque
	perspiciatis quidem quisquam? Alias assumenda cumque distinctio error est eveniet expedita id ipsam officiis voluptatem!
	Aliquid eos illo illum itaque, iure maxime minima odio optio rerum veritatis! Dolor eos eveniet illo, molestias
	necessitatibus
	quod repellendus vel? A ab adipisci animi at delectus eligendi fugiat id in, inventore itaque libero maiores maxime
	molestiae
	neque nostrum numquam, obcaecati officiis qui quia, quidem quo quos soluta suscipit voluptatibus voluptatum?
	</p>
	<h1 id="heading13">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quae quam quibusdam quisquam quo. Aliquid aut consequatur
	dolores eveniet ex id incidunt, mollitia necessitatibus, quasi, quia quibusdam quo rem ullam unde vero! Autem blanditiis
	cumque delectus ducimus fugit illum impedit maiores neque perferendis, porro quae ullam voluptatem voluptatum? Amet
	asperiores
	dolores enim esse expedita facilis, incidunt inventore nisi praesentium provident quidem quo repellat suscipit tempora
	veritatis. Commodi, cupiditate, modi. Architecto assumenda at dolorem eos facere illum itaque magni, minus molestiae nam
	praesentium quia quibusdam reprehenderit sed sequi sint sunt tempore vero. Accusamus, aliquam dolore doloribus fugit ipsam
	veniam vitae? Culpa.
	</p>
	<h1 id="heading14">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cupiditate distinctio dolor dolore impedit non, possimus
	similique suscipit voluptates. Accusamus aperiam architecto asperiores beatae, blanditiis consectetur cum cupiditate
	debitis
	dignissimos dolor dolorum harum hic illum maxime neque nobis praesentium provident quibusdam recusandae saepe ut,
	veritatis
	vitae voluptas voluptatem voluptatum! Accusamus ad architecto cumque cupiditate nisi quasi voluptatibus? Adipisci, aliquam
	dignissimos ea eius esse facilis iusto maiores natus neque, provident suscipit ut vitae. Accusamus accusantium aliquid
	beatae
	consequuntur culpa deserunt dolores eaque earum eum illo illum ipsa iure laudantium mollitia nam quisquam, quos repellat
	saepe
	sapiente sit sunt tempora tenetur totam.
	</p>
	<h1 id="heading15">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur ducimus enim excepturi ipsum laboriosam modi nam
	nulla temporibus voluptate. Ab accusantium asperiores assumenda commodi consequatur cum cumque dicta dolor doloremque
	earum
	error esse ex excepturi expedita hic id in incidunt iure labore laboriosam mollitia, nemo nesciunt nisi numquam omnis,
	perferendis placeat praesentium quae quibusdam quis recusandae repellat sit sunt tempore ullam vitae voluptatibus? Fugiat
	iure
	ut voluptate? Aliquid animi assumenda dicta dignissimos ex facere illum laboriosam, non repudiandae sapiente? A aliquid
	blanditiis deleniti dignissimos est harum in labore maxime molestias, nihil, officiis pariatur quibusdam quisquam? Maxime
	minus placeat rem!
	</p>
	<h1 id="heading16">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci aliquam amet atque consectetur, consequuntur
	corporis dicta ea eligendi ex exercitationem explicabo fuga impedit, incidunt inventore magni minima nam nihil nulla
	obcaecati
	odio perspiciatis possimus quam quia rem repellat reprehenderit repudiandae rerum sed soluta tempora tenetur totam vel
	vero
	vitae, voluptates? Asperiores earum necessitatibus nulla odio perferendis placeat qui quia sed. Ad atque delectus dolorem
	est
	eum fugit illum in inventore ipsa molestias nam natus neque nesciunt nulla, pariatur provident quas quia quidem quo quos
	repellendus tempore voluptates? A dignissimos doloribus exercitationem incidunt laudantium obcaecati odio quidem.
	Repudiandae,
	voluptatibus.
	</p>
	<h1 id="heading17">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam obcaecati soluta unde veritatis? Autem
	corporis
	dicta fugiat obcaecati quam reprehenderit sapiente soluta? Ad, aliquid aperiam dolorum earum explicabo hic id illo in
	labore,
	molestias mollitia neque officiis sint tenetur totam! Corporis, cumque dignissimos eius ex iusto laboriosam magnam
	nesciunt
	odio odit officiis provident quasi quod reprehenderit repudiandae, sunt tempore temporibus vel. Adipisci aspernatur aut
	consequatur eius inventore iusto natus placeat quos sequi tempore! Debitis dolore enim, iure nostrum perspiciatis quaerat
	sunt. Adipisci autem dolor error molestiae nam nulla provident quis repellendus. At cumque id nemo quae sequi tempora,
	veniam.
	</p>
	<h1 id="heading18">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis consequatur fugiat hic nulla! Adipisci amet atque
	commodi
	cupiditate distinctio doloribus error expedita, harum labore laudantium minus nesciunt quaerat quasi sed ullam? Alias
	assumenda dolorem doloribus eos ex illum ipsam soluta tenetur ut. Adipisci aspernatur debitis distinctio expedita impedit
	ipsam iusto, magnam nisi officiis quod totam ut! Ab adipisci animi assumenda at aut beatae consequuntur corporis culpa
	dicta
	dolores dolorum eius expedita facilis fuga illum inventore iure laudantium minima minus modi nam nemo neque, nesciunt
	obcaecati officia praesentium quas quia quo rem repudiandae rerum sapiente tenetur totam vel veritatis vero voluptatem?
	</p>
	<h1 id="heading19">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolorem doloremque ea fugit, hic illum iste nostrum
	odio
	quaerat, ratione saepe similique veritatis, vero? Architecto at consectetur consequatur cum eligendi fugiat ipsam iure
	maxime
	nam necessitatibus obcaecati odit officia optio quod sunt temporibus, voluptatem. Aliquam, aut distinctio est eveniet iure
	magnam minus molestias neque officia quasi quos sint, ullam, velit! Adipisci animi beatae dolorem doloribus eum fuga
	fugit,
	harum illum in labore laborum nemo nihil omnis possimus provident quam quis quisquam repudiandae sequi sint sunt, suscipit
	temporibus tenetur totam velit vero voluptate voluptates! Aliquam dolorem eos incidunt quibusdam vitae voluptatem.
	</p>
	<h1 id="heading20">heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, laborum sit? Aspernatur at autem doloremque in, iusto
	molestias neque quos tempore veniam voluptatum! Cum dolores, earum iure iusto quam reprehenderit veritatis voluptate.
	Doloremque itaque neque quo! Beatae id non odit provident quis quisquam recusandae repellendus reprehenderit sequi
	voluptate?
	Ad at aut consectetur culpa cum cumque eligendi error exercitationem inventore, ipsa labore minus modi nobis non porro
	praesentium quasi quidem quisquam, quos recusandae. Illum nesciunt sequi vero. Amet animi consequuntur debitis eaque enim
	eos
	harum ipsa ipsam iure laborum molestiae nulla obcaecati provident quae quos sed, tempora voluptatibus! Nesciunt, numquam,
	pariatur?
	</p>
	</div>
	<nav>
	<a href="#heading1">heading1</a><br>
	<a href="#heading2">heading2</a><br>
	<a href="#heading3">heading3</a><br>
	<a href="#heading4">heading4</a><br>
	<a href="#heading5">heading5</a><br>
	<a href="#heading6">heading6</a><br>
	<a href="#heading7">heading7</a><br>
	<a href="#heading8">heading8</a><br>
	<a href="#heading9">heading9</a><br>
	<a href="#heading10">heading10</a><br>
	<a href="#heading11">heading11</a><br>
	<a href="#heading12">heading12</a><br>
	<a href="#heading13">heading13</a><br>
	<a href="#heading14">heading14</a><br>
	<a href="#heading15">heading15</a><br>
	<a href="#heading16">heading16</a><br>
	<a href="#heading17">heading17</a><br>
	<a href="#heading18">heading18</a><br>
	<a href="#heading19">heading19</a><br>
	<a href="#heading20">heading20</a><br>
	</nav>
	<script>
	(function () {
	document.body.addEventListener('click', e => {
	if (e.target.matches('nav a')) {
	e.preventDefault()
	history.replaceState(null, null, e.target.href)
	//necessary to handle changed state
	window.dispatchEvent(new Event('hashchange'))
	}
	})

	window.addEventListener('hashchange', e => {
	alert(location.hash)
	})
	}());
	</script>
	</body>
	</html>