<h1>Page Scrolling</h1>
<div class="box margin-large-bottom">
	<button class="font-code" onclick="doScrollTo()">.scrollTo()</button>
	<button class="font-code" onclick="doScrollIntoView()">.scrollIntoView()</button>
</div>

<h3>.scrollTo (x-coord, y-coord | options)</h3>

<blockquote>
	The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element.
		<p>
		<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo</a>
	</p>
</blockquote>

<h3>scrollToOptions</h3>
<p>
	These are the options avaialble for use with scrollTo.
</p>
<blockquote>
	The ScrollToOptions dictionary of the CSSOM View spec contains properties specifying where an element should be scrolled to, and whether the scrolling should be smooth.
	<p>
		<a href="https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions</a>
	</p>
</blockquote>

<h3>.scrollIntoView ([alignToTop | scrollIntoViewOptions])</h3>

<blockquote>
	The Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window.
	<p>
		<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView</a>
	</p>
</blockquote>
<p>
	In the latest version of chrome 72.0.3626.119. I have found that this causes the whole page to jump. I believe it is a bug with the browser and not how the code is implmented nor a CSS issue.
</p>

<h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

<h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

<h3>1914 translation by H. Rackham</h3>
<p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>

<h3>Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>

<h3>1914 translation by H. Rackham</h3>
<p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>

<h4 id="scroll-target">I am the scroll target</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh magna, lobortis ut maximus a, sagittis eget mi. In pretium, felis et blandit rutrum, velit felis molestie magna, sit amet consectetur justo metus eget sapien. Nam pulvinar quam velit, non fermentum sapien volutpat pretium. Maecenas ac lectus id ligula lobortis tincidunt. Fusce porta tempor elit, id fringilla quam vehicula ac. Maecenas ultricies neque in justo elementum, in tristique lectus laoreet. Praesent mollis ipsum quis magna pharetra, ac semper felis tempus. In sit amet orci quis dui semper tincidunt nec nec felis.
</p>
<p>
Nullam in sem nec risus elementum fringilla. Pellentesque tincidunt tortor vel sem lacinia commodo. Sed id tortor in justo ultricies facilisis. Mauris vitae volutpat lorem. Integer non justo id orci posuere pharetra sed ut lorem. Nam laoreet justo ligula, non blandit mi hendrerit quis. Sed tincidunt luctus metus placerat posuere. Nunc malesuada est turpis, nec lacinia mauris dignissim pretium. Nulla facilisi. Quisque dictum sem justo, a sodales elit porta et. Integer non convallis mauris. Aenean sit amet quam enim.
</p>
<p>
Nullam turpis neque, commodo ut purus et, bibendum luctus felis. Quisque in turpis a nulla finibus blandit id eget tortor. Phasellus vestibulum ligula eget accumsan scelerisque. Fusce nec ipsum at diam finibus consectetur. Nam eu nisi feugiat, aliquet felis eu, gravida turpis. Nulla auctor fringilla quam, laoreet facilisis nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et justo non nunc ornare rutrum. Aenean eu blandit libero. Nam sagittis enim at nisi cursus, vel lobortis urna luctus. Nulla facilisi. Aliquam ultrices justo at ex feugiat imperdiet. Fusce nec augue tempor, rhoncus quam eu, auctor ex. Vestibulum accumsan arcu sed nulla finibus, ut eleifend arcu finibus. Aliquam erat volutpat.
</p>
<p>
Morbi fringilla egestas dui, nec vehicula arcu pulvinar sit amet. Nunc in interdum ipsum. Nulla facilisi. Aliquam ultrices dolor et tortor gravida rhoncus. Sed ex dui, sodales id tortor sed, gravida blandit mauris. Vestibulum pretium consectetur dui, varius rutrum lectus. Phasellus vel arcu condimentum, efficitur eros ut, sollicitudin dolor. In rhoncus tortor quis purus porttitor, mattis ornare enim imperdiet. Duis condimentum, libero vitae ultricies tempus, neque mi facilisis sapien, sed consequat magna erat nec velit. Praesent elementum lacinia pharetra. In hac habitasse platea dictumst. Duis sed lobortis nunc, eget vestibulum sapien. Nulla venenatis, leo nec volutpat commodo, nisi velit tincidunt mi, vitae pellentesque diam elit sed odio. Phasellus in pretium sem. Sed interdum ipsum risus, eget gravida mauris imperdiet sit amet.
</p>
<p>
Donec sed lectus odio. In accumsan ac ligula a imperdiet. Donec et sapien hendrerit, aliquet nulla nec, ultrices ante. Phasellus molestie neque tempus metus fermentum condimentum. Nulla id mi egestas, vestibulum neque ut, venenatis metus. Aenean nec sagittis ante. Integer sit amet rutrum diam. Vivamus in purus nec elit vehicula feugiat ac eget purus. Praesent at odio nisi. Etiam ut libero ut libero viverra scelerisque. Nulla placerat ornare arcu, in vulputate lorem mattis quis.
</p>
<p>
Sed eget purus ac quam blandit malesuada non vitae urna. Cras egestas vitae libero malesuada sollicitudin. Pellentesque varius consectetur mauris, quis mattis libero ornare a. Fusce egestas turpis at ipsum gravida eleifend. Nulla tortor odio, maximus vitae tincidunt at, bibendum ut velit. Sed at metus non orci pharetra convallis ut sed elit. Morbi condimentum urna in nisi luctus consequat. Aliquam mattis neque vel est tempus vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin elit quam, bibendum at luctus nec, dignissim sed dolor. Maecenas varius ornare dapibus. Nam placerat suscipit volutpat. Sed volutpat sem at fermentum malesuada. Mauris dignissim pharetra erat non maximus.
</p>
<p>
Nunc non luctus tortor. Nunc faucibus lacus a massa dignissim scelerisque. Phasellus interdum, diam ac ullamcorper vulputate, augue elit ornare neque, ut cursus mi justo porta massa. Nunc placerat dui non cursus ultricies. Mauris dapibus suscipit laoreet. Quisque odio urna, varius non sollicitudin eget, varius vel turpis. Aliquam massa ligula, imperdiet sit amet orci eu, auctor vulputate sapien. Aenean fermentum justo consectetur condimentum laoreet.
</p>
<p>
Aliquam dapibus sapien sodales, malesuada felis in, dapibus mi. Quisque faucibus tristique mi, ac aliquam orci venenatis at. Morbi dictum posuere tristique. Praesent lacinia tempor dui quis maximus. Phasellus et dui euismod dolor sagittis auctor. Aliquam diam neque, laoreet eget sagittis ut, laoreet et ipsum. Phasellus vel nulla ut lectus finibus lacinia. Fusce eu massa a nisl vestibulum rhoncus nec et enim. Ut tincidunt vehicula bibendum.
</p>
<p>
Maecenas nec consectetur mi. Fusce quam felis, malesuada eu libero ut, ullamcorper facilisis enim. Suspendisse et vulputate dolor, ut porta leo. Pellentesque consectetur ante sit amet purus maximus, non hendrerit sapien imperdiet. Nam commodo lectus in ante semper venenatis. Praesent in mauris odio. Nunc nec massa eget felis vehicula semper. Vestibulum hendrerit quam vel dui euismod ullamcorper.
</p>
<p>
Etiam dictum magna et consequat laoreet. Nullam ut quam enim. Nunc consectetur bibendum ante, quis iaculis nunc maximus eget. Suspendisse potenti. Proin placerat risus quis dui interdum pharetra. Nunc orci metus, hendrerit ut turpis ultrices, cursus malesuada turpis. Integer tristique in dui a finibus. Morbi sodales quam et quam maximus, vel cursus ligula pellentesque. Duis interdum libero sed diam tincidunt laoreet. Mauris faucibus magna est, nec sollicitudin est placerat sit amet. Nullam posuere dictum dolor, sed ultrices enim elementum nec. Suspendisse lobortis tincidunt tempus.
</p>
<p>
Donec aliquet molestie diam et aliquam. Pellentesque cursus tellus nec mattis porttitor. Sed vel cursus leo. Morbi in nulla metus. Etiam vel egestas arcu, hendrerit commodo nisi. Sed sodales sodales sapien, at dapibus erat faucibus tincidunt. Morbi dignissim id lacus vitae pulvinar. Nulla tempor sem sed eleifend venenatis. Vivamus congue elit sed placerat congue. Nunc metus nisl, porttitor ut ex sed, convallis ullamcorper lectus. Fusce non dictum est, eu auctor leo. Phasellus libero metus, auctor eget iaculis sit amet, euismod quis enim. Quisque volutpat a metus ac ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sodales justo nunc, vel semper sem euismod vitae.
</p>
<p>
Suspendisse gravida elit vitae lorem condimentum, tempor ullamcorper lectus commodo. Nam at tristique mauris. Nam maximus urna eget feugiat tincidunt. Donec in orci at erat molestie mattis. Nulla sed dictum orci, at ullamcorper lacus. In elit dui, euismod a viverra nec, mollis eget sapien. Phasellus malesuada egestas varius. Quisque sit amet blandit urna. Curabitur tincidunt et neque non condimentum. Cras ultricies sem eget aliquam ornare. Etiam in euismod erat.
</p>
<p>
Morbi luctus faucibus magna in ullamcorper. Nulla fermentum justo quis massa imperdiet, vitae pharetra arcu rutrum. Vestibulum semper, metus vitae tincidunt fringilla, arcu odio consequat ipsum, id volutpat justo nibh eget metus. Proin vulputate, dolor vitae pulvinar vehicula, elit enim viverra eros, a vestibulum felis justo et orci. Curabitur id augue et orci pretium elementum. Suspendisse nibh purus, posuere efficitur lectus in, ullamcorper tristique ipsum. Integer ornare sodales justo, id efficitur elit scelerisque at. Fusce hendrerit faucibus neque, eu vestibulum arcu. Aliquam tristique felis vel sagittis sagittis. Duis fringilla, massa at vehicula dictum, ex neque volutpat neque, in luctus tortor nunc nec nisi.
</p>
<p>
Nulla mi dui, mattis non diam in, suscipit lobortis diam. Sed eget erat volutpat, maximus felis ac, faucibus urna. Ut sed aliquet ipsum. Nullam interdum turpis nec quam lacinia feugiat. Etiam sed aliquam risus, in pulvinar enim. Nullam eu pharetra nulla, ac elementum enim. Proin lacus eros, aliquam in urna in, finibus auctor massa. Fusce congue leo efficitur augue maximus feugiat. Nam vel hendrerit augue. Donec finibus varius mi id luctus.
</p>
<p>
Sed ac odio eu nibh pharetra interdum at id nisl. Nunc eget urna id purus bibendum pellentesque in ut quam. Vivamus at finibus sapien, nec finibus sem. Donec feugiat nibh vel nisl lacinia, vitae porta ex lacinia. Ut a elementum diam, et congue turpis. Nulla facilisi. Aliquam fringilla viverra urna, vitae hendrerit justo auctor a. Vestibulum tempus pharetra urna, et molestie metus. Vestibulum hendrerit, magna gravida varius ultrices, augue risus sodales velit, et iaculis lorem ipsum quis urna. Nulla justo nulla, fringilla eu dui et, tristique tristique arcu.
</p>