John Smith John Smith - 11 days ago 5
Javascript Question

HTML/CSS: How to make a bar on the side to take you to a certain part of the page

This is what I'm talking about

How would I make something like this so when you scroll the dots show you where you are on the page and click it to take you to that section?

Also do you use javascript if you want the page to scroll to a section instead of just appearing on it?

Answer

Here's a quick and dirty version - there are probably better ways to do stuff, but this works (you can use :before / :after pseudo-classes if you want and use icons/font-awesome for the circles, that way you can lose at least the <i>element. But I was too lazy to make that.

(This has been edited slightly to cater for on-page elements, instead of between pages)

body {
  background: black;
  color: white;
  }
h2,p {
  margin-left: 10em;
  }
#menu {
  list-style-type: none;
  position: fixed;
  left: 1em;
  top: 15%;
  }
#menu li {;
  line-height: 1.5em;
  margin: .25em 0;
  }
#menu li i {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid white;
  border-radius: 50%;
  line-height: 1.5em;
  vertical-align: middle;
  }
#menu li span {
  display: none;
  }
#menu li:hover span {
  display: inline-block;
  color: white;
  padding-left: 1em;
  }
#menu li:hover i {
  background: white;
  }
<ul id="menu">
  <li><a href="#first"><i></i><span>First item</span></a></li>
  <li><a href="#second"><i></i><span>Second</span></a></li>
  <li><a href="#third"><i></i><span>Third item</span></a></li>
  <li><a href="#fourth"><i></i><span>Fourth</span></a></li>
</ul>

<h2 id="first">First item</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In schola desinis. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Oratio me istius philosophi non offendit; Graecis hoc modicum est: Leonidas, Epaminondas, tres aliqui aut quattuor; Ea possunt paria non esse. Sed haec quidem liberius ab eo dicuntur et saepius. Si verbum sequimur, primum longius verbum praepositum quam bonum. Invidiosum nomen est, infame, suspectum. Paria sunt igitur. </p>

<p>Apparet statim, quae sint officia, quae actiones. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Illum mallem levares, quo optimum atque humanissimum virum, Cn. </p>
<h2 id="second">Second item</h2>
<p>Illa tamen simplicia, vestra versuta. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Tum Quintus: Est plane, Piso, ut dicis, inquit. Erit enim mecum, si tecum erit. Primum in nostrane potestate est, quid meminerimus? Eadem nunc mea adversum te oratio est. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. </p>

<p>Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Consequens enim est et post oritur, ut dixi. Ut proverbia non nulla veriora sint quam vestra dogmata. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Quae contraria sunt his, malane? In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. </p>
<h2 id="third">Third item</h2>
<p>Quo modo autem optimum, si bonum praeterea nullum est? Philosophi autem in suis lectulis plerumque moriuntur. Duarum enim vitarum nobis erunt instituta capienda. Sed haec nihil sane ad rem; Obsecro, inquit, Torquate, haec dicit Epicurus? Age nunc isti doceant, vel tu potius quis enim ista melius? </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In schola desinis. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Oratio me istius philosophi non offendit; Graecis hoc modicum est: Leonidas, Epaminondas, tres aliqui aut quattuor; Ea possunt paria non esse. Sed haec quidem liberius ab eo dicuntur et saepius. Si verbum sequimur, primum longius verbum praepositum quam bonum. Invidiosum nomen est, infame, suspectum. Paria sunt igitur. </p>

<p>Apparet statim, quae sint officia, quae actiones. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Illum mallem levares, quo optimum atque humanissimum virum, Cn. </p>
<h2 id="fourth">Fourth item</h2>
<p>Illa tamen simplicia, vestra versuta. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Tum Quintus: Est plane, Piso, ut dicis, inquit. Erit enim mecum, si tecum erit. Primum in nostrane potestate est, quid meminerimus? Eadem nunc mea adversum te oratio est. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. </p>

<p>Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Consequens enim est et post oritur, ut dixi. Ut proverbia non nulla veriora sint quam vestra dogmata. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Quae contraria sunt his, malane? In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. </p>

<p>Quo modo autem optimum, si bonum praeterea nullum est? Philosophi autem in suis lectulis plerumque moriuntur. Duarum enim vitarum nobis erunt instituta capienda. Sed haec nihil sane ad rem; Obsecro, inquit, Torquate, haec dicit Epicurus? Age nunc isti doceant, vel tu potius quis enim ista melius? </p>

Comments