A Pen by Joshua Cottrell.

index.html

<a name="top"></a>
<h3>Top</h3>
<ul><li><a href="#top">Top</a></li><li><a href="#mid">Middle</a></li><li><a href="#bottom">Bottom</a></li></ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed laoreet nisl. Praesent laoreet velit quis diam hendrerit, et aliquet magna aliquam. Nam quis lorem in tellus hendrerit consectetur. Sed eu leo odio. Fusce suscipit neque sed rhoncus feugiat. Curabitur vel neque tellus. Nullam porta bibendum cursus. Vestibulum consequat elit justo, quis lobortis sapien blandit sed.

<p>Donec eget nunc pulvinar, condimentum leo in, dapibus sapien. Sed at lobortis metus. Aliquam sed mi id neque placerat dapibus. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris molestie dignissim condimentum. Morbi vel vehicula libero. Praesent a adipiscing turpis. Maecenas varius lectus ut risus lobortis lacinia. Nunc in tellus sed ligula congue vehicula a quis est. Duis nisl ante, ornare non porttitor sit amet, suscipit in turpis.

<p>Curabitur accumsan ultricies pellentesque. Nam eros justo, aliquam ac ultricies at, lobortis at libero. Mauris elementum mauris augue, et fringilla massa dignissim ut. Morbi et rhoncus elit. Nulla facilisi. Vestibulum tempus justo at dui fermentum, vitae volutpat eros sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque auctor malesuada elit a cursus. Nullam vestibulum, erat vitae accumsan euismod, tortor lorem vehicula lacus, non placerat urna diam nec nulla. Vivamus facilisis tortor sit amet volutpat ornare. Praesent in lobortis turpis, facilisis luctus erat. Nunc ac scelerisque libero. Suspendisse ultrices mauris non consectetur fermentum.

<p>In eget tempor elit. Ut purus justo, semper nec eros id, fringilla accumsan dui. Vivamus non fringilla libero. Pellentesque tortor risus, tincidunt nec rutrum a, ullamcorper semper est. Praesent pellentesque ultrices quam id cursus. Sed pulvinar luctus turpis, at cursus lacus. Nam sed ornare dui. Sed varius molestie erat at ultricies. Nullam vel neque vel odio molestie mollis. Praesent vitae euismod eros. Nulla eget iaculis dui. Morbi quis nisl et odio feugiat tristique.

<p>Morbi vestibulum lectus vitae velit bibendum malesuada. Aenean ac molestie lacus, in scelerisque lacus. Cras sit amet diam libero. Duis a magna odio. Etiam sed tellus arcu. Cras at elit at mi laoreet tincidunt. Donec vel lorem urna. Donec molestie mattis dui ut hendrerit. Pellentesque adipiscing dictum cursus. Nulla sed est nec sapien tempor porta at eget est. Donec id lacus ut ante semper dignissim. Cras pharetra varius ligula id pretium.

<p>Nam et arcu venenatis, cursus felis sed, ornare dui. Morbi bibendum ullamcorper urna non euismod. Mauris turpis eros, pellentesque ut pharetra in, dapibus ut lectus. Praesent magna sem, convallis sed pharetra eget, auctor sit amet erat. Nulla cursus eget risus condimentum vehicula. Quisque convallis urna in diam consectetur, eu rutrum tortor pretium. Mauris vehicula fringilla lacus id mattis. Nulla felis augue, faucibus in sapien vel, venenatis bibendum diam. Proin bibendum risus nec mauris pretium venenatis. Mauris ornare ornare metus, at tempor sem condimentum ut. Sed gravida enim diam, ut vulputate erat consequat at. Aenean vel accumsan nibh, vitae elementum sem. Phasellus varius eleifend faucibus. Pellentesque adipiscing tellus eget ante hendrerit placerat. Vestibulum suscipit faucibus justo, ac dignissim diam euismod id.

    <p>Pellentesque volutpat libero lacus, eu rutrum augue scelerisque ullamcorper. Maecenas iaculis neque erat, at rhoncus orci condimentum in. Sed vitae turpis interdum, vestibulum metus sed, hendrerit dui. Mauris viverra id risus in viverra. Praesent aliquam rhoncus elit vel consequat. In tincidunt eu risus et tristique. Nam magna felis, lacinia nec diam eget, consectetur blandit turpis.</p>
<a name="mid"></a>
<h3>Middle</h3>
<ul><li><a href="#top">Top</a></li><li><a href="#mid">Middle</a></li><li><a href="#bottom">Bottom</a></li></ul>
<p>Integer gravida magna a mi porta, et posuere arcu porta. In eget risus tempus nisi viverra porttitor. Aenean vitae nulla ultricies elit ultricies mattis eu sagittis nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at sapien gravida metus ullamcorper sollicitudin. Duis rutrum viverra sapien, nec elementum ligula eleifend sed. In ornare ligula sit amet lectus placerat, quis volutpat purus porta. In interdum quam sit amet enim tempus, vel gravida arcu laoreet. Etiam at faucibus libero. Praesent vitae nisl justo. Sed ante quam, ullamcorper ac mauris nec, pulvinar scelerisque turpis.

<p>Nam posuere, sapien vel auctor tempor, justo risus ultrices augue, in porttitor sem nulla vitae quam. Nam ac tempor est, quis interdum enim. Suspendisse condimentum urna eu quam posuere congue. Donec a felis vel felis dapibus tincidunt eget eu urna. Cras eget laoreet diam. Proin aliquet nulla arcu, id gravida risus facilisis nec. Fusce non nisi at urna porttitor ullamcorper vitae a lorem. Suspendisse sit amet nunc eget sem egestas sollicitudin id posuere sapien. Integer at accumsan est, non eleifend est. Proin tincidunt est at arcu aliquet, et malesuada erat viverra. Sed elementum libero id commodo condimentum. Fusce placerat orci vel dolor sagittis vulputate. Mauris et ligula mauris.

<p>Nam cursus aliquet nunc at varius. Aliquam erat volutpat. Maecenas at turpis sit amet erat tincidunt egestas. Curabitur blandit adipiscing mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada vitae enim in rhoncus. In ut diam in orci imperdiet tristique. Integer blandit elit dignissim commodo ornare. Nam auctor consectetur feugiat. Etiam imperdiet eleifend mollis. Curabitur pretium vitae mauris eget lacinia. Aenean leo eros, iaculis vitae elit non, blandit pharetra neque.

<p>Donec non justo nec mauris hendrerit cursus at at dolor. Pellentesque eget elit euismod, molestie lectus nec, congue mi. Nam viverra enim eu neque facilisis tempus. Nulla nec sodales eros. In ut enim arcu. Sed ligula neque, volutpat et enim eu, venenatis consectetur dui. Maecenas consectetur, arcu at lacinia fringilla, velit nunc fringilla metus, sodales lobortis lacus elit nec urna. In tincidunt laoreet auctor.

<p>Nulla ullamcorper elit quis hendrerit tincidunt. Phasellus metus urna, feugiat eget blandit quis, gravida vitae diam. Nullam id elit et quam vehicula faucibus. Vivamus condimentum tellus augue, et tempor massa venenatis eget. Phasellus sit amet nulla quis dui porttitor mattis. Morbi semper nunc sit amet leo feugiat, sed condimentum mauris rhoncus. Morbi viverra mauris at fringilla viverra. Sed ut dolor id eros eleifend tristique. Nullam quam diam, dictum eu iaculis sed, feugiat a ante. Vivamus at accumsan nisl, non ornare enim. Donec quis varius lectus, sit amet posuere mi. Duis ac mauris tempor, pretium orci non, facilisis quam. Vivamus non vestibulum mi, elementum tristique ipsum. Integer scelerisque tincidunt ultrices.

<p>Quisque aliquet diam quis lectus elementum aliquam. Sed vel suscipit arcu. Sed ullamcorper libero at lectus rhoncus semper. Morbi mollis, leo sit amet condimentum euismod, ligula tortor aliquet dolor, vel posuere magna orci fringilla tellus. Ut tempus augue et fermentum aliquam. Nulla facilisi. Nullam ac auctor mi. Aliquam lobortis, magna sit amet interdum eleifend, lorem magna porttitor magna, non viverra dui elit id lectus. Maecenas non luctus lacus. Nulla pretium, metus eu tempor interdum, justo ipsum eleifend metus, mattis viverra arcu felis vitae lacus. Etiam eget purus enim. Fusce pharetra id orci id vestibulum.</p>

<p>Cras ultrices magna ac placerat varius. Phasellus faucibus bibendum mauris a pulvinar. Pellentesque non enim vel mauris tempus elementum. Nullam eu velit sit amet nulla dictum placerat non et urna. Etiam eleifend, metus ut feugiat vestibulum, ligula tortor consequat elit, ac fringilla dolor sem a quam. Sed in ligula nunc. Curabitur tincidunt sit amet ante eget lobortis. Praesent vehicula auctor diam at porta.</p>

<p>Aenean tincidunt ligula quis nibh feugiat, et volutpat sapien tincidunt. Vivamus tincidunt commodo congue. Cras vel facilisis nibh, et pharetra metus. Duis vel augue ut elit congue dictum vitae at leo. In id molestie lacus, id faucibus augue. Aenean nibh nisl, suscipit a nibh vel, aliquam cursus tortor. Aliquam ultrices lectus at nisi suscipit commodo. Pellentesque risus libero, aliquet eget libero non, euismod gravida erat. Nullam at auctor urna. Vestibulum dapibus rhoncus nulla euismod pulvinar. Nullam varius risus sit amet vehicula mollis. Aliquam erat volutpat. Nullam imperdiet interdum quam, id laoreet justo gravida molestie. Donec et suscipit nulla. Praesent non fringilla leo.</p>
<a name="bottom"></a>
<h3>Bottom</h3>
<ul><li><a href="#top">Top</a></li><li><a href="#mid">Middle</a></li><li><a href="#bottom">Bottom</a></li></ul>

Simple-HTML-links-within-pages.markdown

Simple HTML links within pages

Simple menu and text that uses anchor tags to navigate a single page. The same could be used to create a link on one page to a destination mid-page on another page.

A Pen by Joshua Cottrell on CodePen.

License.

style.css

ul{margin:0;padding:0;}
li{display:inline;padding-right:10px;}