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

Question

This is what I'm talking about

我如何制作这样的东西，以便当您滚动圆点时显示您在页面上的位置并单击它以将您带到该部分？

如果您希望页面滚动到某个部分而不是仅仅出现在该部分上，您是否也使用 javascript？

Answer 1

这是一个快速而肮脏的版本 - 可能有更好的方法来做事，但这有效(你可以使用 :before/:after 伪类，如果你想和使用 icons/font-awesome 的圈子，那样你至少可以丢失 <i> 元素。但我懒得做那个。

(为了迎合页面上的元素，而不是页面之间的元素，对其进行了轻微的编辑)

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>